做前端開發的朋友對于ajax異步更新一定印象深刻，作為剛入坑的小白，今天就和大家一起聊聊關于ajax異步請求的那點事。既然是ajax就少不了jQuery的知識，推薦大家訪問www.w3school.com學習，教程完善，適合初學者快速入門。
jQuery的引用，可以通過下載js文件導入，或通過外部導入
導入好jQuery之后我們就可以開始進行ajax異步更新請求數據了。
1、使用load()方法通過Ajax請求加載服務器中的數據，并把返回的數據放置到指定的元素中，它的調用格式為：load(url,[data],[callback])參數url為加載服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
$(function(){ $("#btn").click(function(){ $("ul").html("<img src='Images/Loading.gif' alt=''/>").load("www.manyiaby.com",function(){ }); });});2、使用getJSON()方法可以通過Ajax異步請求的方式，獲取服務器中的數據，并對獲取的數據進行解析，顯示在頁面中，它的調用格式為：jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])其中，url參數為請求加載json格式文件的服務器地址，可選項data參數為請求時發送的數據，callback參數為數據請求成功后，執行的回調函數。
$(function(){ $("#btn").click(function(){ $.getJson("www.manyiaby.com", function(data){ $.each(data, function(index, sport){ if(index==3) alert(sport["name"]); }) }); });});3、使用getScript()方法異步請求并執行服務器中的JavaScript格式的文件，它的調用格式如下所示：jQuery.getScript(url,[callback])或$.getScript(url,[callback])參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
$(function(){ $("#btn").click(function(){ $.getScript("www.manyiaby.com", function(){ alert("操作完成"); }); });});4、使用get()方法時，采用GET方式向服務器請求數據，并通過方法中回調函數的參數返回請求的數據，它的調用格式如下：$.get(url,[callback])參數url為服務器請求地址，可選項callback參數為請求成功后執行的回調函數。
$(function(){ $("#btn").click(function(){ $.get("www.manyiaby.com", function(data){ alert(data.name); }, "json"); });});5、與get()方法相比，post()方法多用于以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，并將處理結果返回頁面，調用格式如下：$.post(url,[data],[callback])參數url為服務器請求地址，可選項data為向服務器請求時發送的數據，可選項callback參數為請求成功后執行的回調函數。
$(function(){ $("#btn").click(function(){ $.post("www.manyiaby.com",{name:"滿藝網", url:"www.manyiaby.com"}, function(data){ alert(data); }); });});6、使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用于ajax請求，它的調用格式如下：$(selector).serialize()其中selector參數是一個或多個表單中的元素或表單元素本身。
$(function(){ $("#btn").click(function(){ alert($("form").serialize()); });});7、使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求并傳遞數值，它的調用格式如下：jQuery.ajax([settings])或$.ajax([settings])其中參數settings為發送ajax請求時的配置對象，在該對象中，url表示服務器請求的路徑，data為請求時傳遞的數據，dataType為服務器返回的數據類型，success為請求成功的執行的回調函數，type為發送數據請求的方式，默認為get。
$(function(){ $("#btn").click(function(){ $.ajax({ url:"www.manyiaby.com", dataType:"text", data:{name:"滿藝網", url:"wwww.manyiaby.com"}, success:function(data){ alert(data); } }); });});8、使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值，它的調用格式為：jQuery.ajaxSetup([options])或$.ajaxSetup([options])可選項options參數為一個對象，通過該對象設置Ajax請求時的全局選項值。
$(function () { $.ajaxSetup({ dataType:"text", success:function(data){ alert(data); } }); $("#btn").bind("click", function () { $.ajax({ data: {name: "滿藝網", url: "www.manyiaby.com"}, url: "www.manyiaby.com" }); }) });});9、ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發出前觸發函數，ajaxStop()方法用于在Ajax請求完成后觸發函數。它們的調用格式為：$(selector).ajaxStart(function())和$(selector).ajaxStop(function())其中，兩個方法中括號都是綁定的函數，當發送Ajax請求前執行ajaxStart()方法綁定的函數，請求成功后，執行ajaxStop ()方法綁定的函數。
$(function () { $.ajaxStart(function (){ alert("正在請求數據..."); }); $.ajaxStop(function (){ alert("數據請求完成！"); }); $("#btn").bind("click", function () { $.ajax({ url: "www.manyiaby.com", dataType: "json", success: function (data) { alert("姓名："+data.name); } }); })});10、定義一個json對象，用于保存學生的相關資料，通過$.each()工具函數，獲取數組中各元素的名稱與內容，顯示在頁面中。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <title>練習</title> </head> <body> <button>按鈕</button> <script type="text/javascript"> $(function () { $("button").bind("click", function () { var jsonDate = [{name:"滿藝網", url:"www.manyiaby.com"}]; $.each(jsonDate, function(index, data){ alert(data.name); }); }) }); </script> </body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
