萬盛學電腦網 >> 腳本專題 >> 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，根據自己的需要調用不同的屬性就可以了，這裡面有一點需要注意的是 如果判斷用戶名是否有重復的時候，要使用$.getIfModifiedjavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved