Jquery的Ajax技術(shù)使用方法

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:01:47

Jquery的Ajax技術(shù)使用方法

Jquery的Ajax技術(shù)使用方法:Jquery的Ajax技術(shù)（重點(diǎn)） jquery是一個(gè)優(yōu)秀的js框架，自然對(duì)js原生的ajax進(jìn)行了封裝，封裝后的ajax的操作方法更簡(jiǎn)潔，功能更強(qiáng)大，與ajax操作相關(guān)的jquery方法有如下幾種，但開(kāi)發(fā)中經(jīng)常使用的有三種： 1）$.get(url, [data], [callb

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Jquery的Ajax技術(shù)使用方法:Jquery的Ajax技術(shù)（重點(diǎn)） jquery是一個(gè)優(yōu)秀的js框架，自然對(duì)js原生的ajax進(jìn)行了封裝，封裝后的ajax的操作方法更簡(jiǎn)潔，功能更強(qiáng)大，與ajax操作相關(guān)的jquery方法有如下幾種，但開(kāi)發(fā)中經(jīng)常使用的有三種： 1）$.get(url, [data], [callb

Jquery的Ajax技術(shù)（重點(diǎn)）

jquery是一個(gè)優(yōu)秀的js框架，自然對(duì)js原生的ajax進(jìn)行了封裝，封裝后的ajax的操作方法更簡(jiǎn)潔，功能更強(qiáng)大，與ajax操作相關(guān)的jquery方法有如下幾種，但開(kāi)發(fā)中經(jīng)常使用的有三種：

1）$.get(url, [data], [callback], [type])

2）$.post(url, [data], [callback], [type])

區(qū)別：get有字節(jié)碼亂碼問(wèn)題，post無(wú)字節(jié)碼亂碼問(wèn)題（獲取請(qǐng)求頁(yè)面數(shù)據(jù)到后臺(tái)，后臺(tái)response.setContextType(“text/html;charset=UTF-8”)響應(yīng)亂碼問(wèn)題還與原來(lái)一樣）

其中：

url：代表請(qǐng)求的服務(wù)器端地址

data：代表請(qǐng)求服務(wù)器端的數(shù)據(jù)（可以是key=value形式也可以是json格式）

callback：表示服務(wù)器端成功響應(yīng)所觸發(fā)的函數(shù)（只有正常成功返回才執(zhí)行）

type：表示服務(wù)器端返回的數(shù)據(jù)類型（jquery會(huì)根據(jù)指定的類型自動(dòng)類型轉(zhuǎn)換）常用的返回類型：text、json、html等

如果type為json，并且服務(wù)器端返回的就是json格式字符串jq內(nèi)部會(huì)幫我們自動(dòng)轉(zhuǎn)化，在回調(diào)函數(shù)中獲取的實(shí)參就是轉(zhuǎn)化完成的js對(duì)象直接使用即可。

參數(shù)的順序可更換的，但是如果把data放在后面會(huì)出現(xiàn)無(wú)法傳遞數(shù)據(jù)的問(wèn)題，所以不要擅自更換嚴(yán)格按照jq文檔中的順序進(jìn)行使用。

function get(){
 $.get(
 "/web22-ajax/ajaxServlet2",//url
 {"name":"muzidigbig","age":22},//請(qǐng)求參數(shù),json的數(shù)據(jù)格式
 function(data){//請(qǐng)求成功后返回過(guò)來(lái)的參數(shù)
 alert(data.name+data.age);
 },
 "json"
 );
 };
//java只能是java代碼，前端頁(yè)面的代碼只能轉(zhuǎn)換成json對(duì)象
response.getWriter().write("{\"name\":\"muzi\",\"age\":22}");

3）$.ajax( { option1:value1,option2:value2... } ); （重要）

常用的option有如下：

async：是否異步，默認(rèn)是true代表異步

url：請(qǐng)求服務(wù)器端地址

type：請(qǐng)求方式，POST/GET（不寫默認(rèn)get）

data：發(fā)送到服務(wù)器的參數(shù)，建議使用json格式

success：成功響應(yīng)執(zhí)行的函數(shù)，對(duì)應(yīng)的類型是function類型，請(qǐng)求成功后獲得的值會(huì)自動(dòng)封裝在這個(gè)函數(shù)的第一個(gè)參數(shù)中

error:失敗響應(yīng)執(zhí)行的函數(shù)，對(duì)應(yīng)的類型是function類型

dataType：服務(wù)器端返回的數(shù)據(jù)類型，常用text和json

beforeSend:function (argument) {},// 在發(fā)送請(qǐng)求之前調(diào)用,可以做一些驗(yàn)證之類的處理如果返回false可以取消本次ajax請(qǐng)求。

<body>
<button>發(fā)送請(qǐng)求</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
 $('button').click(function () {
 $.ajax({
 async:true,
 url:"向后臺(tái)地址發(fā)送請(qǐng)求",
 type:'post',//請(qǐng)求的方式
 data:{'name':'muzidigbig','age':'20'},//請(qǐng)求的數(shù)據(jù)
 success:function (backdata) {//請(qǐng)求成功后返回的數(shù)據(jù)會(huì)封裝在回調(diào)函數(shù)的第一個(gè)參數(shù)中
 //通過(guò)backdata來(lái)獲取所需要的數(shù)據(jù)
 alert(backdata.name+backdata.age);
 },
 error:function () {//響應(yīng)不成功時(shí)返回的函數(shù)
 console.log('請(qǐng)求失敗！')
 },
 dataType:'json'//設(shè)置返回的數(shù)據(jù)類型
 })
 });
</script>

若有不足請(qǐng)多多指教！希望給您帶來(lái)幫助！

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Jquery的Ajax技術(shù)使用方法

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：方法教程技術(shù)

熱門焦點(diǎn)

Jquery的Ajax技術(shù)使用方法

Jquery的Ajax技術(shù)使用方法

Jquery的Ajax技術(shù)使用方法

最新推薦

猜你喜歡

熱門推薦