jQuery -- 光阴似箭（五）：AJAX 方法
生活随笔
收集整理的這篇文章主要介紹了
jQuery -- 光阴似箭（五）：AJAX 方法
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jQuery?-- 知識(shí)點(diǎn)回顧篇（五）：AJAX 方法
1. $.ajax 方法：用于執(zhí)行 AJAX（異步 HTTP）請(qǐng)求。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" > $(function(){ //語法格式：$.ajax({name:value, name:value, ... })//該參數(shù)規(guī)定 AJAX 請(qǐng)求的一個(gè)或多個(gè)名稱/值對(duì)。 $("#btn_ajax").click(function(){$.ajax({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
2. $.ajaxSetup() 方法：為將來的 AJAX 請(qǐng)求設(shè)置默認(rèn)值。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){ //語法格式：$.ajaxSetup({name:value, name:value, ... })//該參數(shù)為帶有一個(gè)或多個(gè)名稱/值對(duì)的 AJAX 請(qǐng)求規(guī)定設(shè)置。 $("#btn_ajax").click(function(){$.ajaxSetup({url:"Test_ajax.aspx",success:function(result){$("#myDiv1").html(result);}});$.ajax();});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
3. $.get() 方法：使用 HTTP GET 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js" ></script><script type="text/javascript" > $(function(){ //語法格式：$.get(URL,data,function(data,status,xhr),dataType)//URL: 必需參數(shù)。規(guī)定您需要請(qǐng)求的 URL。//data: 可選參數(shù)。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。//function(data,status,xhr)：可選參數(shù)。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。//dataType：可選參數(shù)。規(guī)定預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型。 $("#btn_ajax").click(function(){$.get("Test_ajax.aspx",function(data){alert("數(shù)據(jù): " data );});});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
4. $.getJSON() 方法：使用 AJAX 的 HTTP GET 請(qǐng)求獲取 JSON 數(shù)據(jù)。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){$("#btn_ajax").click(function(){//語法格式： $(selector).getJSON(url,data,success(data,status,xhr))//url：必需參數(shù)。規(guī)定將請(qǐng)求發(fā)送到哪個(gè) URL。//data：可選參數(shù)。規(guī)定發(fā)送到服務(wù)器的數(shù)據(jù)。//success(data,status,xhr)：可選參數(shù)。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。 $.getJSON("Test_ajax.aspx",function(result){$("myDiv1").text(result);});});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
5. $.getScript() 方法：使用 AJAX 的 HTTP GET 請(qǐng)求獲取和執(zhí)行 JavaScript。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){$("#btn_ajax").click(function(){//語法格式： $(selector).getScript(url,success(response,status))//url: 必需參數(shù)。規(guī)定將請(qǐng)求發(fā)送到哪個(gè) URL。//success(response,status)： 可選參數(shù)。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。 $.getScript("Test_ajax_script.js");});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="width:210px;height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
6. $.param() 方法創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎拘问健Ｐ蛄谢闹悼稍谏?AJAX 請(qǐng)求時(shí)用于 URL 查詢字符串中。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){personObj=new Object();personObj.name="xiaohuzi";personObj.age=26;personObj.web="xiaohuzi.test.com"; //語法格式：$.param(object,trad)//object: 必需參數(shù)。規(guī)定要序列化的數(shù)組或?qū)ο蟆?/span>//trad: 可選參數(shù)。布爾值，指定是否使用參數(shù)序列化的傳統(tǒng)樣式。 $("#btn_ajax").click(function(){$("#myDiv1").text($.param(personObj));});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
7. $.post() 方法：使用 HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){//語法格式：$(selector).post(URL,data,function(data,status,xhr),dataType)//URL: 必需參數(shù)。規(guī)定將請(qǐng)求發(fā)送到哪個(gè) URL。//data: 可選參數(shù)。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。//function(data,status,xhr): 可選參數(shù)。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。//dataType: 可選參數(shù)。規(guī)定預(yù)期的服務(wù)器響應(yīng)的數(shù)據(jù)類型。 $("#btn_ajax").click(function(){$.post("Test_ajax.aspx",function(data){alert("Data: " data );});});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
8. ajaxComplete() 方法：規(guī)定 AJAX 請(qǐng)求完成時(shí)運(yùn)行的函數(shù)。
ajaxStart() 方法：規(guī)定 AJAX 請(qǐng)求開始時(shí)運(yùn)行的函數(shù)。
?? ajaxSend() 方法：規(guī)定 AJAX 請(qǐng)求即將發(fā)送時(shí)運(yùn)行的函數(shù)。
?? ajaxError() 方法：規(guī)定 AJAX 請(qǐng)求失敗時(shí)運(yùn)行的函數(shù)。
?? ajaxStop() 方法：規(guī)定所有的 AJAX 請(qǐng)求完成時(shí)運(yùn)行的函數(shù)。
?? ajaxSuccess() 方法：規(guī)定 AJAX 請(qǐng)求成功完成時(shí)運(yùn)行的函數(shù)。
?? load() 方法：從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放置到指定的元素中。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){//語法格式：$(document).ajaxSend(function(event,xhr,options))//function(event,xhr,options) 必需。規(guī)定當(dāng)請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。 $(document).ajaxSend(function(){$("#myDiv1").css("border","5px solid pink");});//語法格式：$(document).ajaxStart(function())//function(): 必需參數(shù)。規(guī)定當(dāng) AJAX 請(qǐng)求開始時(shí)運(yùn)行的函數(shù)。 $(document).ajaxStart(function(){$("#myDiv1").css("display","block");});//語法格式：$(document).ajaxStop(function())//function(): 必需參數(shù)。規(guī)定所有的 AJAX 請(qǐng)求完成時(shí)運(yùn)行的函數(shù)。 $(document).ajaxStop(function(){$("#myDiv1").css("border","3px solid green");});//語法格式：$(document).ajaxError(function(event,xhr,options,exc))//function(event,xhr,options,exc)：必需參數(shù)。規(guī)定當(dāng)請(qǐng)求失敗時(shí)運(yùn)行的函數(shù)。 $(document).ajaxError(function(){$("#myDiv1").css("border","3px solid red");});//語法格式：$(document).ajaxSuccess(function(event,xhr,options))//function(event,xhr,options): 必需參數(shù)。規(guī)定如果請(qǐng)求成功時(shí)運(yùn)行的函數(shù)。 $(document).ajaxSuccess(function(){$("#myDiv1").css("border","3px solid yellow");});//語法格式：$(document).ajaxComplete(function(event,xhr,options))//function(event,xhr,options)： 必需參數(shù)。規(guī)定當(dāng)請(qǐng)求完成時(shí)運(yùn)行的函數(shù)。 $(document).ajaxComplete(function(){$("#myDiv1").css("display","none");});//語法格式：$(selector).load(url,data,function(response,status,xhr))//url：必需參數(shù)。規(guī)定您需要加載的 URL。//data：可選參數(shù)。規(guī)定連同請(qǐng)求發(fā)送到服務(wù)器的數(shù)據(jù)。//function(response,status,xhr)：可選參數(shù)。規(guī)定 load() 方法完成時(shí)運(yùn)行的回調(diào)函數(shù)。 $("#btn_ajax").click(function(){$("#txt").load("Test_ajax.aspx");});});</script> </head> <body><button type="button" id="btn_ajax">ajax</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> </body> </html>?
9. serialize() 方法：通過序列化表單值創(chuàng)建 URL 編碼文本字符串。
??? serializeArray() 方法：通過序列化表單值來創(chuàng)建對(duì)象（name 和 value）的數(shù)組。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test JQuery</title><script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script><script type="text/javascript" > $(function(){//語法格式：$(selector).serialize()//您可以選擇一個(gè)或多個(gè)表單元素（如輸入和/或文本區(qū)），或表單元素本身。//序列化的值可在生成 AJAX 請(qǐng)求時(shí)用于 URL 查詢字符串中。 $("#btn_serialize").click(function(){$("#myDiv1").text($("form").serialize());});//語法格式：$(selector).serializeArray()//serializeArray() 方法通過序列化表單值來創(chuàng)建對(duì)象（name 和 value）的數(shù)組。//您可以選擇一個(gè)或多個(gè)表單元素（如輸入和/或文本區(qū)），或表單元素本身。 $("#btn_serializeArray").click(function(){x=$("form").serializeArray();$.each(x, function(i, field){$("#myDiv2").append(field.name ":" field.value " ");});});});</script> </head> <body><form action="">姓名: <input type="text" name="Name" value="XiaoHuzi" /><br>年齡: <input type="text" name="Age" value="26" /><br>工作: <input type="text" name="Job" value="IT" /><br></form><button type="button" id="btn_serialize">serialize</button><button type="button" id="btn_serializeArray">serializeArray</button><div id="myDiv1" style="height:30px;padding: 10px;border:2px solid blue;"></div> <div id="myDiv2" style="height:30px;padding: 10px;border:2px solid green;"></div> </body> </html>
?
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的jQuery -- 光阴似箭（五）：AJAX 方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序 网络请求之设置合法域名
- 下一篇： 浅谈自记忆函数