jquery+ajax+C#實現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實例

更新時間：2014年02月08日 09:45:09 投稿：jingxian

本篇文章主要是對jquery+ajax+C#實現(xiàn)無刷新操作數(shù)據(jù)庫數(shù)據(jù)的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助

我們知道同步執(zhí)行和異步執(zhí)行的區(qū)別，為了更好的提高用戶的體驗，我們都會采用異步方式去處理一些問題，畢竟單線程的同步可能回造成卡死等現(xiàn)象，很不友好，所以可以使用ajax來完成用戶的體驗，現(xiàn)在我們就來說說如何使用jquery的ajax來實現(xiàn)無刷新的獲取內(nèi)容

我們只是單方面的獲取內(nèi)容，分頁等就不考慮了，后期會講到無刷新的分頁

頁面中我們放置一個Div容器用來存放返回的內(nèi)容

注：wait.gif是一個類似進(jìn)度條的效果，當(dāng)沒有加載的內(nèi)容沒有加載出來的時候，就顯示這個效果，這樣就能提高用戶的體驗度。然后最重要的就是jquery這塊了，需要用到ajax來完成

代碼：

復(fù)制代碼代碼如下:

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:通信成功后執(zhí)行的函數(shù)

error:通信失敗后執(zhí)行的函數(shù)

beforeSend:通信前執(zhí)行的韓碩

complete:通信完成后執(zhí)行的函數(shù)

在這里采用了POST提交的方式，比Get更安全些，所以也可以替換成下面的方式

復(fù)制代碼代碼如下:

function getInfo1() {
    $.post("doAction.aspx", { fig: "reader", id:"1", page:"1" }, function () {
 $("#comment").html(arguments[0]);
    })
}

可以看到參數(shù)的寫法不同，采用POST提交方式，第一種方式和第二種方式區(qū)別在于：

首先，接收參數(shù)的時候，在doAction.aspx頁面里第一種方式使用Request.QueryString["fig"]接收，第二種方式使用的是Request.Form["fig"]

其次，第一種方式當(dāng)通信失敗后，可以友好的返回錯誤信息，第二種方式暫時沒發(fā)現(xiàn)可以返回

然后在doAction.aspx頁面中，只要進(jìn)行相應(yīng)的處理就可以了

復(fù)制代碼代碼如下:

if (Request.Form["fig"] != null && Request.Form["fig"].ToString() == "reader")
{
     ajax_getcomment("1",1);
}
//從數(shù)據(jù)庫中獲取數(shù)據(jù)
    private void ajax_getcomment(string id, int page)
    {

using (CommentBO cm = new CommentBO(id, page - 1))
{
Response.Write(cm.getCommentContent());
}
}

同樣如果才用Get的提交方式，使用$.get("",{},function(){})也是一樣的..

另外一種加載內(nèi)容的方式可以使load()方法，關(guān)于用法可以查閱api，簡單說說上面的用load如何加載

代碼

復(fù)制代碼代碼如下:

<!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>

這樣就把內(nèi)容加載到頁面里了，有一點問題就是發(fā)現(xiàn)頁面中返回的內(nèi)容和alert彈出的有些不一樣，alert彈出的返回html標(biāo)簽，而頁面沒有，那是因為頁面已經(jīng)解析了html代碼

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

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('評論發(fā)表成功!</script>");
     }
 }

ajax里的屬性很多，可以查看api，根據(jù)自己的需要調(diào)用不同的屬性就可以了，這里面有一點需要注意的是

如果判斷用戶名是否有重復(fù)的時候，要使用$.getIfModified而不能是用$.get，大家可以測試一下

如果使用$.get你第一次注冊了一個名字，你不要做其他的操作，你再在文本框里面輸入相同的名稱，那個時侯還能注冊的，這點要注意。