接上篇“jQuery學習筆記：Ajax(一)”。
3、jQuery.get(url,[data],[callback],[type])
通過遠程 HTTP GET 請求載入信息。
這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
返回值? XMLHttpRequest
參數
url (String) : 待載入頁面的URL地址
data (Map) : (可選) 待發送 Key/value 參數。
callback (Function) : (可選) 載入成功時回調函數。
type (String) : (可選) 返回內容格式，xml, html, script, json, text, _default。
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.get(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqGetNormalCallBack,?'text');?//返回數據類型
}

function?jqGetNormalCallBack(oData)?{
????$("#spanResult").html(oData);//這里直接json數據綁定了，下一個jquery方法會有處理
????$("#spanResult").css("display",?"block");
????$("#spanResult").css("color",?"red");
}

AjaxHandler.ashx代碼：

Code
using?System;
using?System.Collections.Generic;
using?System.Linq;
using?System.Web;
using?System.Web.SessionState;
using?System.Xml;


namespace?MyJQTest
{
????public?class?AjaxHandler?:?IHttpHandler,?IRequiresSessionState
????{
????????///?<summary>
????????///?可復用
????????///?</summary>
????????public?bool?IsReusable
????????{
????????????get
????????????{
????????????????return?true;
????????????}
????????}

????????public?void?ProcessRequest(HttpContext?context)
????????{
????????????AjaxOperations(context);
????????}

????????private?void?AjaxOperations(HttpContext?context)
????????{
????????????string?action?=?context.Request["action"];
????????????if?(!string.IsNullOrEmpty(action))
????????????{
????????????????switch?(action)
????????????????{
????????????????????default:
????????????????????????break;
????????????????????case?"jquery":
????????????????????????ProcessJQueryRequest(context);
????????????????????????break;
????????????????}
????????????}
????????}

????????private?void?ProcessJQueryRequest(HttpContext?context)
????????{
????????????context.Response.ClearContent();
????????????context.Response.ContentType?=?"text/plain";?//設置輸出流類型
??????????????context.Response.Cache.SetCacheability(HttpCacheability.NoCache);?//沒有緩存
??????????????string?userName?=?context.Request["userName"].Trim();
????????????string?location?=?context.Request["location"].Trim();
????????????string?jsonObject?=?"{\"userName\":\""?+?userName?+?"\",\"location\":\""?+?location?+?"\"}";
????????????context.Response.Write(jsonObject);
????????}
????}
}

ps：本例中，我們返回的是一段json類型的數據，在客戶端沒有對json類型數據進行處理，在下一個方法（jQuery.getJSON）中會改進處理的。
4、jQuery.getJSON(url,[data],[callback])
通過 HTTP GET 請求載入 JSON 數據。
在 jQuery 1.2 中，您可以通過使用JSONP 形式的回調函數來加載其他網域的JSON數據，如 "myurl?callback=?"。jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。
注意：此行以后的代碼將在這個回調函數執行前執行。
返回值? XMLHttpRequest
參數
url (String) : 發送請求地址。
data (Map) : (可選) 待發送 Key/value 參數。
callback (Function) : (可選) 載入成功時回調函數。
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????//getJSON方法調用
????$.getJSON(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqGetJsonCallBack);?//返回json數據類型
}

//對json數據進行處理?(oData是json類型的數據)
function?jqGetJsonCallBack(oData)?{
????var?oJsonStr?=?"";
????//取json中的數據,并呈現
????oJsonStr?+=?"userName:"?+?oData.userName?+?"&nbsp;&nbsp;location:"?+?oData.location?+?"<br/>";

????//在div中顯示所有數據
????$("#divResult").html(oJsonStr);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

?5、jQuery.getScript(url,[callback])
通過 HTTP GET 請求載入并執行一個 JavaScript 文件。
jQuery 1.2 版本之前，getScript 只能調用同域 JS 文件。 1.2中，您可以跨域調用 JavaScript 文件。注意：Safari 2 或更早的版本不能在全局作用域中同步執行腳本。如果通過 getScript 加入腳本，請加入延時函數。
返回值? XMLHttpRequest
參數
url (String) : 待載入 JS 文件地址。
callback (Function) : (可選) 成功載入后回調函數。
示例

Code
function?jqAjaxTest()?{
????var?jsUrl?=?"js/jqLoadJs.js";
????//getScript方法調用
????$.getScript(jsUrl,?jqGetJsCallBack);
}

//oData返回的是整個js路徑下js文件內容
function?jqGetJsCallBack(oData)?{
????alert(oData);
}

6、jQuery.post(url,[data],[callback],[type])
通過遠程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
返回值? XMLHttpRequest
參數
url (String) : 發送請求地址。
data (Map) : (可選) 待發送 Key/value 參數。
callback (Function) : (可選) 發送成功時回調函數。
type (String) : (可選) 返回內容格式，xml, html, script, json, text, _default。
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");?//返回text數據類型
}

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

?二、Ajax事件
1、ajaxComplete(callback)
AJAX 請求完成時執行函數。Ajax 事件。
XMLHttpRequest 對象和設置作為參數傳遞給回調函數。
返回值? jQuery
參數
callback (Function) : 待執行函數
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");?//返回text數據類型

????//AJAX?請求完成時執行函數
????$("#divResult").ajaxComplete(function(event,?request,?settings)?{
????????$(this).append("<br/>請求完成.");
????});
}

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

2、ajaxError(callback)
AJAX 請求發生錯誤時執行函數。Ajax 事件。
XMLHttpRequest 對象和設置作為參數傳遞給回調函數。捕捉到的錯誤可作為最后一個參數傳遞。
返回值? jQuery
參數
callback (Function) : 待執行函數
function (event, XMLHttpRequest, ajaxOptions, thrownError) {
????? // thrownError 只有當異常發生時才會被傳遞
????? this; // 監聽的 dom 元素
}

示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandlers.ashx";?//正確的文件名??AjaxHandler.ashx??這里故意寫錯??引發ajaxError事件
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");

}

//AJAX?請求發生錯誤時執行函數?(這一段放在jqAjaxTest函數內也可以)
$("#divResult").ajaxError(function(event,?request,?settings)?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>出錯頁面:"?+?settings.url);
});

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").html(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

3、ajaxSend(callback)
AJAX 請求發送前執行函數。Ajax 事件。
XMLHttpRequest 對象和設置作為參數傳遞給回調函數。
返回值? jQuery
參數
callback (Function) : 待執行函數
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");

}

//AJAX?請求發送前執行函數
$("#divResult").ajaxSend(function(evt,?request,?settings)?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>開始請求:?"?+?settings.url?+?"<br/>");
});

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

4、ajaxStart(callback)
AJAX 請求開始時執行函數。Ajax 事件。
返回值? jQuery
參數
callback (Function) : 待執行函數
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");

}

//AJAX?請求開始時執行函數
$("#divResult").ajaxStart(function()?{
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
????$(this).append("<br/>請求開始了<br/>");
});

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

5、ajaxStop(callback)
AJAX 請求結束時執行函數。Ajax 事件。
返回值? jQuery
參數
callback (Function) : 待執行函數
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");

}

//AJAX?請求開始時執行函數
$("#divResult").ajaxStop(function()?{
????$(this).append("<br/>請求已經結束了<br/>");
});

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

6、ajaxSuccess(callback)
AJAX 請求成功時執行函數。Ajax 事件。
XMLHttpRequest 對象和設置作為參數傳遞給回調函數。
返回值? jQuery
參數
callback (Function) : 待執行函數
示例

Code
function?jqAjaxTest()?{
????var?jqRequestUrl?=?"AjaxHandler.ashx";?
????$.post(jqRequestUrl?+?"?action=jquery",?{?userName:?"jeff?wong",?location:?"beijing"?},?jqPostCallBack,?"text");

}

//AJAX?請求成功時執行函數
$("#divResult").ajaxSuccess(function(evt,?request,?settings)?{
????$(this).append("<br/>請求成功<br/>");
????$(this).append(settings.url);
});

function?jqPostCallBack(oData)?{
????//在div中顯示所有數據
????$("#divResult").append(oData);
????$("#divResult").css("display",?"block");
????$("#divResult").css("color",?"red");
}

三、其他
1、jQuery.ajaxSetup(options)
設置全局 AJAX 默認選項。
參數見 '$.ajax' 說明。
返回值? jQuery
參數
options (可選) : 選項設置。所有設置項均為可選設置。
示例

//設置?AJAX?請求默認地址為?"AjaxHandler.ashx"，禁止觸發全局?AJAX?事件，用?POST?代替默認?GET?方法。其后的?AJAX?請求不再設置任何選項參數。?
$.ajaxSetup({
????url:?"AjaxHandler.ashx",
????global:?false,
????type:?"POST"
});

2、serialize()
序列化表單內容為字符串。
返回值? jQuery
參數
序列化表單內容為字符串，用于 Ajax 請求。
示例

$(document).ready(function()?{
????var?oSerializedStr?=?$("form").serialize();?//序列化表單內容為字符串
????$("#results").append("<tt>"?+?oSerializedStr?+?"</tt>");
});

文檔片段：

Code
<body>
????<p?id="results">
????????<b>Results:?</b>
????</p>
????<form>
????<select?name="single">
????????<option>Single</option>
????????<option>Single2</option>
????</select>
????<select?name="multiple"?multiple="multiple">
????????<option?selected="selected">Multiple</option>
????????<option>Multiple2</option>
????????<option?selected="selected">Multiple3</option>
????</select><br?/>
????<input?type="checkbox"?name="check"?value="check1"?/>
????check1
????<input?type="checkbox"?name="check"?value="check2"?checked="checked"?/>
????check2
????<input?type="radio"?name="radio"?value="radio1"?checked="checked"?/>
????radio1
????<input?type="radio"?name="radio"?value="radio2"?/>
????radio2
????</form>

????<script?src="js/jQTest.js"?type="text/javascript"></script>

</body>

3、serializeArray()
序列化表單內容，返回 JSON 數據結構數據。
返回值? jQuery
參數
序列化表單內容為JSON ，用于 Ajax 請求。
示例

Code
$(document).ready(function()?{
????var?fields?=?$("select,?:radio").serializeArray();?//序列化表單select和raido為json
????jQuery.each(fields,?function(i,?field)?{
????????$("#results").append(field.value?+?"?");
????});?
});

?好了，關于jQuery的ajax就介紹到這里，筆者的每個示例都測試通過了。jQuery封裝好的ajax函數用起來確實方便，有了這樣的“神兵利器”，以后寫ajax的應用程序肯定會更加得心應手。

總結

以上是生活随笔為你收集整理的jQuery学习笔记：Ajax(二)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。