2023學(xué)年完整公開(kāi)課版jQuery操作Ajax

《物聯(lián)網(wǎng)Web前端開(kāi)發(fā)基礎(chǔ)》課程

jQuery操作Ajax【任務(wù)9-7】jQuery操作Ajax下面將帶領(lǐng)讀者學(xué)習(xí)jQuery的Ajax操作。需求分析傳統(tǒng)的Ajax是通過(guò)XMLHttpRequest實(shí)現(xiàn)的，不僅代碼復(fù)雜，而且瀏覽器兼容問(wèn)題也比較多。因此，jQuery中通過(guò)對(duì)Ajax操作的封裝，極大地簡(jiǎn)化了Ajax操作的開(kāi)發(fā)過(guò)程?！救蝿?wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法傳統(tǒng)的Ajax是通過(guò)XMLHttpRequest實(shí)現(xiàn)的，不僅代碼復(fù)雜，而且瀏覽器兼容問(wèn)題也比較多。jQuery中通過(guò)對(duì)Ajax操作的封裝，極大地簡(jiǎn)化了Ajax操作的開(kāi)發(fā)過(guò)程?！救蝿?wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法分類(lèi)方法說(shuō)明高級(jí)應(yīng)用$.get(url[,data][,fn][,type])通過(guò)遠(yuǎn)程HTTPGET請(qǐng)求載入信息$.post(url[,data][,fn][,type])通過(guò)遠(yuǎn)程HTTPPOST請(qǐng)求載入信息$.getJSON(url[,data][,fn])通過(guò)HTTPGET請(qǐng)求載入JSON數(shù)據(jù)$.getScript(url[,fn])通過(guò)HTTPGET請(qǐng)求載入并執(zhí)行一個(gè)JavaScript文件元素對(duì)象.load(url[,data][,fn])載入遠(yuǎn)程HTML文件代碼并插入至DOM中底層應(yīng)用$.ajax(url[,options])通過(guò)HTTP請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)$.ajaxSetup(options)設(shè)置全局Ajax默認(rèn)選項(xiàng)【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法參數(shù)url表示待請(qǐng)求頁(yè)面的URL地址。data表示傳遞的參數(shù)。參數(shù)fn表示請(qǐng)求成功時(shí)，執(zhí)行的回調(diào)函數(shù)。參數(shù)type用于設(shè)置服務(wù)器返回的數(shù)據(jù)類(lèi)型，如XML、JSON、HTML、TEXT等。參數(shù)options用于設(shè)置Ajax請(qǐng)求的相關(guān)選項(xiàng)。【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法選項(xiàng)名稱(chēng)說(shuō)明url處理Ajax請(qǐng)求的服務(wù)器地址data發(fā)送Ajax請(qǐng)求時(shí)傳遞的參數(shù)，字符串類(lèi)型successAjax請(qǐng)求成功時(shí)所觸發(fā)的回調(diào)函數(shù)type發(fā)送的HTTP請(qǐng)求方式，如get、postdatatype期待的返回值類(lèi)型，如xml、json、script或html數(shù)據(jù)類(lèi)型async是否異步，true表示異步，false表示同步，默認(rèn)值為truecache是否緩存，true表示緩存，false表示不緩存，默認(rèn)值為truecontentType請(qǐng)求頭，默認(rèn)值為application/x-www-form-urlencoded;charset=UTF-8complete當(dāng)服務(wù)器URL接收完Ajax請(qǐng)求傳送的數(shù)據(jù)后觸發(fā)的回調(diào)函數(shù)jsonp在一個(gè)jsonp請(qǐng)求中重寫(xiě)回調(diào)函數(shù)的名稱(chēng)【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法$.post('index.php',{'id':2,'name':'JS'},function(msg){console.log(msg.id+'-'+);//輸出結(jié)果：2-JS},'json');$.post()上述代碼表示處理當(dāng)前Ajax請(qǐng)求的地址是同級(jí)目錄下的index.php，在A(yíng)jax請(qǐng)求成功后，接收index.php返回的JSON格式的數(shù)據(jù)并在控制臺(tái)進(jìn)行輸出?！救蝿?wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法在jQuery中對(duì)Ajax的操作方法中，$.ajax(url,[options])是底層方法。通過(guò)該方法的options參數(shù)，可以實(shí)現(xiàn)$.get()、$.post()、$.getJSON()和$.getScript()方法同樣的功能。下面列舉$.ajax()方法的3種常用方式。只發(fā)送GET請(qǐng)求發(fā)送GET請(qǐng)求并傳遞數(shù)據(jù)，接收返回結(jié)果只配置setting參數(shù)，同樣實(shí)現(xiàn)Ajax操作【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法$.ajax('index.php',{data:{'book':'PHP','sales':2000},//要發(fā)送的數(shù)據(jù)

success:function(msg){//請(qǐng)求成功后執(zhí)行的函數(shù)alert(msg);}});$.ajax('index.php');示例1示例2【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax操作方法$.ajax({type:'GETurl:'index.php',data:{'id':2,'name':'JS'},success:function(msg){console.log(msg);}});$.ajaxSetup({type:'GET',url:'index.php',data:{'id':2,'name':'JS'},success:function(msg){alert(msg);}});$.ajax();等價(jià)【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax輔助方法在jQuery中還為操作Ajax額外的提供了一些輔助的函數(shù)以及相關(guān)的Ajax事件處理方法，方便開(kāi)發(fā)。方法/函數(shù)說(shuō)明$.param(obj)創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎緎erialize()通過(guò)序列化表單值，創(chuàng)建URL編碼文本字符串serializeArray()通過(guò)序列化表單值，創(chuàng)建對(duì)象數(shù)組（名稱(chēng)和值）【任務(wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax輔助方法vardata={'id':2,'name':'Lucy',skill:['PHP','JS']};varseri_data=$.param(data);vardeseri_data=decodeURIComponent(seri_data);//輸出結(jié)果：id=2&name=Lucy&skill%5B%5D=PHP&skill%5B%5D=JSconsole.log(seri_data);//輸出結(jié)果：id=2&name=Lucy&skill[]=PHP&skill[]=JSconsole.log(deseri_data); 序列化對(duì)象上述代碼表示處理當(dāng)前Ajax請(qǐng)求的地址是同級(jí)目錄下的index.php，在A(yíng)jax請(qǐng)求成功后，接收index.php返回的JSON格式的數(shù)據(jù)并在控制臺(tái)進(jìn)行輸出?！救蝿?wù)9-7】jQuery操作Ajax知識(shí)儲(chǔ)備——jQuery中的Ajax輔助方法$('input[type=button]').on('click',function(){console.log($('form').serialize