jquery+ajax+C#实现无刷新操作数据库数据的简单实例
我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容 我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页 页面中我们放置一个Div容器用来存放返回的内容 <div id="comment"> 注:wait.gif是一个类似进度条的效果,当没有加载的内容没有加载出来的时候,就显示这个效果,这样就能提高用户的体验度。然后最重要的就是jquery这块了,需要用到ajax来完成 代码: 复制代码 代码如下: function getInfo() { $.ajax({ url:"doAction.aspx?fig=reader&id=1&page=1", type:"POST", success:function(Data) { $("#comment").html(Data); //通过arguments[0]接收也可以 $("#comment").html(arguments[0]); }, error:function() { alert("程序出错"); } }) } url:指向的url type:提交的方式,可以为POST或者GET success:通信成功后执行的函数 error:通信失败后执行的函数 beforeSend:通信前执行的韩硕 complete:通信完成后执行的函数 在这里采用了POST提交的方式,比Get更安全些,所以也可以替换成下面的方式 复制代码 代码如下: function getInfo1() { $.post("doAction.aspx",{ fig: "reader",id:"1",page:"1" },function () { $("#comment").html(arguments[0]); }) } 可以看到参数的写法不同,采用POST提交方式,第一种方式和第二种方式区别在于: 首先,接收参数的时候,在doAction.aspx页面里第一种方式使用Request.QueryString["fig"]接收,第二种方式使用的是Request.Form["fig"] 其次,第一种方式当通信失败后,可以友好的返回错误信息,第二种方式暂时没发现可以返回 然后在doAction.aspx页面中,只要进行相应的处理就可以了 复制代码 代码如下: if (Request.Form["fig"] != null && Request.Form["fig"].ToString() == "reader") { ajax_getcomment("1",1); } //从数据库中获取数据 private void ajax_getcomment(string id,int page) { using (CommentBO cm = new CommentBO(id,page - 1)) 同样如果才用Get的提交方式,使用$.get("",{},function(){})也是一样的.. 另外一种加载内容的方式可以使load()方法,关于用法可以查阅api,简单说说上面的用load如何加载 代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </div> 这样就把内容加载到页面里了,有一点问题就是发现页面中返回的内容和alert弹出的有些不一样,alert弹出的返回html标签,而页面没有,那是因为页面已经解析了html代码 其他的添加,修改,删除等基本操作也是如此,大同小异,只是在doaction.aspx页面中调用不同的方法而已,下面把主要的jquery代码贴出来看看 复制代码 代码如下: function addpinlun() { var $CommentParentID =arguments[0]; var $CommentUser =$('#CommentUser').val(); var $CommentText =$('#CommentText').val(); var $CommentValidate =$('#CommentValidate').val(); if($.trim($CommentUser)=='') { alert("请填写昵称!"); $("#CommentUser").focus(); return false; } if($.trim($CommentText)=='') { alert("请填写评论内容!"); $("#CommentText").focus(); return false; } if($.trim($CommentValidate)=='') { alert("请输入验证码"); $("#CommentValidate").focus(); return false; } StopButton('CommentSubmit',10); // 验证完成可以ajax添加 $.ajax({ url: "doAction.aspx?action=add&commentparentid=" + $CommentParentID + "&commentuser=" + escape($CommentUser) + "&commenttext=" + escape($CommentText) + "&commentvalidate=" + escape($CommentValidate) + "&time=" + new Date().toString(), type: "GET", success: function (data) { if (arguments[0] == "ERROR") { alert("验证码超时,请重新输入"); } else { getInfo(); $("#CommentText").val(""); //验证成功时,刷新验证码图片 $("#CommentValidateImages").attr("src","VerifyCode.aspx?s=" + Math.random()); // alert("添加成功"); $("#alertMessgae").html(data); } $('#CommentValidate').val(""); } }) } function StopButton() DoAction.aspx页面的部分代码页贴出来 复制代码 代码如下: if(Request.QueryString["action"]!=null && Request.QueryString["action"]=="add") { if (Session["VerifyCode"].ToString().ToLower() != commentvalidate.ToLower()) { Response.Write("ERROR"); } else { DBQuery.ExecuteScalar("insert into comment(commentparentid,commentuser,commenttext,commentreply,commentip) values('" + commentparentid + "','" + commentuser + "','" + Server.HtmlEncode(commenttext) + "','','" + Request.ServerVariables["REMOTE_ADDR"] + "')"); Response.Write("<script>alert('评论发表成功!</script>"); } } ajax里的属性很多,可以查看api,根据自己的需要调用不同的属性就可以了,这里面有一点需要注意的是 如果判断用户名是否有重复的时候,要使用$.getIfModified而不能是用$.get,大家可以测试一下 如果使用$.get你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时侯还能注册的,这点要注意。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- HTML,CSS:用“,“或`code`显示HTML代码?
- html – 如果div不存在,你可以在CSS中应用CSS规则
- domain-name-system – PDNS服务器的正确设置过程
- Jquery Mobile 自定义按钮图标
- javascript – 如果客户端使用移动浏览器,如何在
- jquery – 将参数传递给cluetip(coldfusion)内容
- C#开发微信门户及应用(48) - 在微信框架中整合Ca
- 如何使文本居中,而不是HTML有序列表的数字标签
- extjs ColumnChart设置不同的颜色实现代码
- html – 如何更改materialize datetimepicker的默