我們知道同步執行和異步執行的區別，為了更好的提高用戶的體驗，我們都會采用異步方式去處理一些問題，畢竟單線程的同步可能回造成卡死等現象，很不友好，所以可以使用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你第一次注冊了一個名字，你不要做其他的操作，你再在文本框裡面輸入相同的名稱，那個時侯還能注冊的，這點要注意。