jquery ajax C#實作無刷新操作資料庫資料的簡單實例_jquery

我們知道同步執行和非同步執行的區別，為了更好的提高用戶的體驗，我們都會採用非同步方式去處理一些問題，畢竟單線程的同步可能回造成卡死等現象，很不友好，所以可以使用ajax來完成使用者的體驗，現在我們就來談談如何使用jquery的ajax來實現無刷新的獲取內容

我們只是單方面的取得內容，分頁等就不考慮了，後期會講到無刷新的分頁

頁面中我們放置一個Div容器用來存放回傳的內容

註：wait.gif是個類似進度條的效果，當沒有載入的內容沒有載入出來的時候，就顯示這個效果，這樣就能提高使用者的體驗度。然後最重要的就是jquery這塊了，需要用到ajax來完成

程式碼：

複製程式碼 程式碼如下:

function getInfo> {
   $.ajax({
    url:"doAction.aspx?fig=reader&id=1&page=1",
     type:"POST",
  
      $("#comment").html(Data);
//透過arguments[0]接收也可以$("#comment").html(arguments[0]); 
   },
    error:function()
    {
alert("程序出錯");
    }
  

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如何載入

程式碼

複製程式碼

程式碼如下:

   
   
   

   

這樣就載入到頁面裡了，有一點問題就是發現頁面中回傳的內容和警報彈出的有些不一樣，警報彈出的返回html標籤，而頁面沒有，那是因為頁面已經解析了html代碼

其他的添加，修改，刪除等基本操作也是如此，大同小異，只是在doaction.aspx頁面中調用不同的方法下面，把主要的jquery貼出來代碼看看

複製程式碼程式碼如下：

function addpinlun()
{
 > 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) "f/commenttext=" escape(mscape; ) "&commentvalidate=" escape($CommentValidate) "&time=" new Date().toString(),
    type: "GET",
    success: function (data) {
 ] == "ERROR ") {
    alert("驗證碼逾時，請重新輸入");
 }
 else {
    .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]. ] ] ")";
   if(arguments[1]>=1)
   {
參數[1]--;
window.setTimeout("StopButton('" 參數[0] " '," argument[1] ")",1000);
   }
   else
   {
    document.getElementById(arguments[
    document.getElementById(arguments[
    document.getElementById(arguments[0]).disable=falcom argument[0]).value="提交";
   }
}

DoAction.aspx頁面的部分程式碼頁貼出來

複製程式碼程式碼如下：

if(Request.QueryString["action"]!=null && Request.QueryString["action"]=="add")
 {
     if (Session["VerifyCode"]. ToString().ToLower() != commentvalidate.ToLower())
     {
  Response.Write("ERROR");
   ExecuteScalar( "insert into comment(commentparentid,commentuser,commenttext,commentreply,commentip) values('" commentparentid "','" commentuser "','" Server.HtmlEncode(commenttext) "','','" Request.ServerVariables["mlEncode(commenttext) "','','" Request.ServerVariables[" REMOTE_ADDR"] "')");
  Response.Write("<script>alert('評論發表成功!</script>");
     }
 }


ajax裡的屬性很多，可以查看api，依照自己的需求呼叫不同的屬性就可以了，這裡面有一點要注意的是

如果判斷使用者名稱是否有重複的時候，要使用$.getIfModified而不能是用$.get，大家可以測試一下
如果使用$.get你第一次註冊了一個名字，你不要做其他的操作，你再在文字框裡面輸入相同的名稱，那個時侯還能註冊的，這點要注意。