jQuery使用ajax_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
用JavaScript寫AJAX前面已經(jīng)介紹過了,主要問題就是不同瀏覽器需要寫不同代碼,并且狀態(tài)和錯(cuò)誤處理寫起來很麻煩。
用jQuery的相關(guān)對(duì)象來處理AJAX,不但不需要考慮瀏覽器問題,代碼也能大大簡(jiǎn)化。
ajax
jQuery在全局對(duì)象jQuery(也就是$)綁定了ajax()函數(shù),可以處理AJAX請(qǐng)求。ajax(url, settings)函數(shù)需要接收一個(gè)URL和一個(gè)可選的settings對(duì)象,常用的選項(xiàng)如下:
async:是否異步執(zhí)行AJAX請(qǐng)求,默認(rèn)為true,千萬不要指定為false;
method:發(fā)送的Method,缺省為'GET',可指定為'POST'、'PUT'等;
contentType:發(fā)送POST請(qǐng)求的格式,默認(rèn)值為'application/x-www-form-urlencoded; charset=UTF-8',也可以指定為text/plain、application/json;
data:發(fā)送的數(shù)據(jù),可以是字符串、數(shù)組或object。如果是GET請(qǐng)求,data將被轉(zhuǎn)換成query附加到URL上,如果是POST請(qǐng)求,根據(jù)contentType把data序列化成合適的格式;
headers:發(fā)送的額外的HTTP頭,必須是一個(gè)object;
dataType:接收的數(shù)據(jù)格式,可以指定為'html'、'xml'、'json'、'text'等,缺省情況下根據(jù)響應(yīng)的Content-Type猜測(cè)。
下面的例子發(fā)送一個(gè)GET請(qǐng)求,并返回一個(gè)JSON格式的數(shù)據(jù):
var jqxhr = $.ajax('/api/categories', { dataType: 'json' }); // 請(qǐng)求已經(jīng)發(fā)送了
不過,如何用回調(diào)函數(shù)處理返回的數(shù)據(jù)和出錯(cuò)時(shí)的響應(yīng)呢?
還記得Promise對(duì)象嗎?jQuery的jqXHR對(duì)象類似一個(gè)Promise對(duì)象,我們可以用鏈?zhǔn)綄懛▉硖幚砀鞣N回調(diào):
'use strict'; function ajaxLog(s) { var txt = $('#test-response-text'); txt.val(txt.val() + '\n' + s); } $('#test-response-text').val(''); var jqxhr = $.ajax('/api/categories', { dataType: 'json' }).done(function (data) { ajaxLog('成功, 收到的數(shù)據(jù): ' + JSON.stringify(data)); }).fail(function (xhr, status) { ajaxLog('失敗: ' + xhr.status + ', 原因: ' + status); }).always(function () { ajaxLog('請(qǐng)求完成: 無論成功或失敗都會(huì)調(diào)用'); });
get
對(duì)常用的AJAX操作,jQuery提供了一些輔助方法。由于GET請(qǐng)求最常見,所以jQuery提供了get()方法,可以這么寫:
var jqxhr = $.get('/path/to/resource', { name: 'Bob Lee', check: 1 });
第二個(gè)參數(shù)如果是object,jQuery自動(dòng)把它變成query string然后加到URL后面,實(shí)際的URL是:
/path/to/resource?name=Bob%20Lee&check=1
這樣我們就不用關(guān)心如何用URL編碼并構(gòu)造一個(gè)query string了。
post
post()和get()類似,但是傳入的第二個(gè)參數(shù)默認(rèn)被序列化為application/x-www-form-urlencoded:
var jqxhr = $.post('/path/to/resource', { name: 'Bob Lee', check: 1 });
實(shí)際構(gòu)造的數(shù)據(jù)name=Bob%20Lee&check=1作為POST的body被發(fā)送。
getJSON
由于JSON用得越來越普遍,所以jQuery也提供了getJSON()方法來快速通過GET獲取一個(gè)JSON對(duì)象:
var jqxhr = $.getJSON('/path/to/resource', { name: 'Bob Lee', check: 1 }).done(function (data) { // data已經(jīng)被解析為JSON對(duì)象了 });
安全限制
jQuery的AJAX完全封裝的是JavaScript的AJAX操作,所以它的安全限制和前面講的用JavaScript寫AJAX完全一樣。
如果需要使用JSONP,可以在ajax()中設(shè)置jsonp: 'callback',讓jQuery實(shí)現(xiàn)JSONP跨域加載數(shù)據(jù)。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery使用ajaxSubmit()提交表單示例
- jquery ajax例子返回值詳解
- jquery中ajax使用error調(diào)試錯(cuò)誤的方法
- JQuery AJAX提交中文亂碼的解決方案
- 基于JQuery框架的AJAX實(shí)例代碼
- JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
- jquery ajax 向后臺(tái)傳遞數(shù)組參數(shù)示例
相關(guān)文章
實(shí)例講解Jquery中隱藏hide、顯示show、切換toggle的用法
這篇文章主要介紹了實(shí)例講解Jquery中隱藏hide、顯示show、切換toggle的用法,感興趣的小伙伴們可以參考一下2016-05-05jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動(dòng)顯示和隱藏表單的代碼,非常的簡(jiǎn)單實(shí)用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。2015-03-03jQuery中ajax和post處理json的不同示例對(duì)比
用了post方法去處理ajax回調(diào)的json數(shù)據(jù),死活取不到,后臺(tái)就是有json返回了,關(guān)于這個(gè)問題的解決方法如下,你若遇到可以看看2014-11-11jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航
這篇文章主要介紹了jQuery實(shí)現(xiàn)B2B網(wǎng)站后臺(tái)管理系統(tǒng)側(cè)導(dǎo)航,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07jQuery插件-jRating評(píng)分插件源碼分析及使用方法
該插件被廣泛應(yīng)用于各種需要評(píng)分的頁面當(dāng)中,今天作為學(xué)習(xí),把源碼拿出來分析一下,順便學(xué)習(xí)其使用方法,需要了解的朋友可以研究下2012-12-12jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax(實(shí)例詳解)
這篇文章主要介紹了jQuery validate(submitHandler函數(shù))驗(yàn)證通過發(fā)送Ajax,可以用validate框架驗(yàn)證元素,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2022-10-10