本篇文章主要是對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而不能是用$.get,大家可以測試一下 如果使用$.get你第一次注冊了一個名字,你不要做其他的操作,你再在文本框裡面輸入相同的名稱,那個時侯還能注冊的,這點要注意。