萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 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來完成   代碼:  代碼如下: 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))  {      Response.Write(cm.getCommentContent());  }     }     同樣如果才用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"> <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代碼貼出來看看  代碼如下: 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頁面的部分代碼頁貼出來 代碼如下: 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
copyright © 萬盛學電腦網 all rights reserved