好贷网好贷款

jquery+ajax+C#实现无刷新操作数据库数据

发布时间:2016-12-4 3:50:06 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"jquery+ajax+C#实现无刷新操作数据库数据",主要涉及到jquery+ajax+C#实现无刷新操作数据库数据方面的内容,对于jquery+ajax+C#实现无刷新操作数据库数据感兴趣的同学可以参考一下。

我们知道同步执行和异步执行的区别,为了更好的提高用户的体验,我们都会采用异步方式去处理一些问题,毕竟单线程的同步可能回造成卡死等现象,很不友好,所以可以使用ajax来完成用户的体验,现在我们就来说说如何使用jquery的ajax来实现无刷新的获取内容        我们只是单方面的获取内容,分页等就不考虑了,后期会讲到无刷新的分页        页面中我们放置一个Div容器用来存放返回的内容        <div id="comment">             <img src="images/Wait.gif" title="数据载入中..." /></div>        注:wait.gif是一个类似进度条的效果,当没有加载的内容没有加载出来的时候,就显示这个效果,这样就能提高用户的             体验度        然后最重要的就是jquery这块了,需要用到ajax来完成       代码: View Code 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更安全些,所以也可以替换成下面的方式   View Code 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))         {             Response.Write(cm.getCommentContent());         }     }  同样如果才用Get的提交方式,使用$.get("",{},function(){})也是一样的.. 另外一种加载内容的方式可以使load()方法,关于用法可以查阅api,简单说说上面的用load如何加载 代码 View Code <!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"> <head runat="server">     <title></title>     <script src="js/jquery.js" type="text/javascript"></script>     <script type="text/javascript">         $(function () {             $("#btnLoad").click(function () {                 $("#content").load("doAction.aspx",{fig:"reader",id:"1",page:"1"},function (responseText, textStatus, XMLHttpRequest) {                     alert(responseText);                 });             })         })     </script> </head> <body>     <form id="form1" runat="server">     <input type="button" id="btnLoad" value="加载load" />     <div id="content">             </div>     </form> </body> </html> 这样就把内容加载到页面里了,有一点问题就是发现页面中返回的内容和alert弹出的有些不一样,alert弹出的返回html标签,而页面没有,那是因为页面已经解析了html代码    其他的添加,修改,删除等基本操作也是如此,大同小异,只是在doaction.aspx页面中调用不同的方法而已,下面把主要的jquery代码贴出来看看   View Code 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() {     document.getElementById(arguments[0]).disabled=true;     document.getElementById(arguments[0]).value="提交("+arguments[1]+")";    if(arguments[1]>=1)    {        arguments[1]--;        window.setTimeout("StopButton('"+arguments[0]+"',"+arguments[1]+")",1000);    }    else    {     document.getElementById(arguments[0]).disabled=false;     document.getElementById(arguments[0]).value="提交";    } } DoAction.aspx页面的部分代码页贴出来   View Code   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你第一次注册了一个名字,你不要做其他的操作,你再在文本框里面输入相同的名称,那个时 侯还能注册的,这点要注意。

上一篇:C#抽象类
下一篇:明白什么是“五险一金”,花五分钟读一下不吃亏

相关文章

相关评论