成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jQuery實(shí)現(xiàn)Ajax

scwang90 / 441人閱讀

摘要：設(shè)置全局默認(rèn)的默認(rèn)選項(xiàng)實(shí)際用時(shí)仍然可以將默認(rèn)選項(xiàng)值覆蓋和方法用于在請(qǐng)求發(fā)出前觸發(fā)函數(shù)。和請(qǐng)求出錯(cuò)時(shí)注冊(cè)一個(gè)回調(diào)處理函數(shù)，這是一個(gè)。綁定一個(gè)函數(shù)當(dāng)請(qǐng)求成功完成時(shí)執(zhí)行，這是一個(gè)。

目前Web開(kāi)發(fā)形式是后端僅僅提供api接口，那么系統(tǒng)的前端如何得到后端傳來(lái)的這些數(shù)據(jù)呢？

然后系統(tǒng)前端所填的信息又是如何傳遞給后端呢？

我想最容易易理解的方案那就是通過(guò)ajax進(jìn)行前后端的數(shù)據(jù)交互，（直接用jQuery庫(kù)封裝好的ajax方法）

ajax都是異步請(qǐng)求的 所以接下去所記錄的方法也都是異步進(jìn)行的 load(url,[data],[callback]) 異步請(qǐng)求載入遠(yuǎn)程HTML片段并插入至DOM中

直接加載HTML頁(yè)面

$("#abc").load("abc.html")

也可以加載HTML片段中某個(gè)需要的匹配部分

$("#abc").load("html5/abc.html #abc")
$.getJSON(url,[data],[callback]) 使用一個(gè)HTTP GET請(qǐng)求從服務(wù)器加載JSON編碼的數(shù)據(jù)

getJSON()是全局jQuery對(duì)象的方法，也就是全局函數(shù)。
通過(guò)url獲取JSON數(shù)據(jù)格式,然后使用回調(diào)函數(shù)將獲取的數(shù)據(jù)進(jìn)行后續(xù)操作。

$.getJSON("abc.json",function(data){
    console.log(data);
})
$.getScript(url,[callback]) 使用一個(gè)HTTP GET請(qǐng)求從服務(wù)器加載并執(zhí)行一個(gè) JavaScript 文件

同getJSON方法一樣,也是全局jQuery對(duì)象的方法。
有時(shí)候初次加載頁(yè)面是有些js文件未必都是必須的，可以通過(guò)這個(gè)方法可以用戶在操作可以動(dòng)態(tài)靈活的加載所需的js腳本。

$.getScript("abc/abc.js")
$.get(url,[data],[callback]) 使用一個(gè)HTTP GET請(qǐng)求從服務(wù)器加載數(shù)據(jù)

get可簡(jiǎn)單的理解為從服務(wù)器獲取數(shù)據(jù)進(jìn)行之后一系列操作。

$.get("http://www.imooc.com/data/info_f.php",function(data){
    $("#abc").html(data);
})
$.post(url,[callback]) 使用一個(gè)HTTP POST 請(qǐng)求從服務(wù)器加載數(shù)據(jù)

而post請(qǐng)求雖說(shuō)與get請(qǐng)求結(jié)構(gòu)一樣但也有一些區(qū)別.

GET方式對(duì)傳輸?shù)臄?shù)據(jù)大小有限制，而POST方式傳遞的數(shù)據(jù)量要比GET方式大得多。

$.post("http://www.imooc.com/data/check_f.php",{
    num:$("txtNumber").val()
},function(data){
    console.log(data);
})

使用post請(qǐng)求發(fā)送序列化表單數(shù)據(jù)

$.post("test.php", $("#testform").serialize(),function(data){
    alert("發(fā)送成功");
});
$.ajax([settings]) 執(zhí)行一個(gè)異步的HTTP（Ajax）的請(qǐng)求

ajax()是功能最強(qiáng)大的請(qǐng)求數(shù)據(jù)的方法，不僅可以請(qǐng)求數(shù)據(jù)，也可以向服務(wù)器發(fā)送數(shù)據(jù)，也可以進(jìn)行跨域獲取json數(shù)據(jù)。

$.ajax({
    url:"url"
    type:"post",
    async:true,
    data:data,
    dataType: "json",
    success:function(data){}
})

$.ajaxSetup[options] 設(shè)置全局默認(rèn)的Ajax默認(rèn)選項(xiàng)

$.ajaxSetup({
    type:"post",
    async:true,
    dataType: "json",
})

實(shí)際用$.ajax()時(shí) 仍然可以將默認(rèn)選項(xiàng)值覆蓋

ajaxStart()和ajaxStop() 
$(document).ajaxStart(function() {
   $( "#loading" ).show();
 });
$(document).ajaxStop(function() {
    $( "#loading" ).hide();
});

ajaxStart()方法用于在Ajax請(qǐng)求發(fā)出前觸發(fā)函數(shù)。

ajaxStop()方法用于在Ajax請(qǐng)求完成后觸發(fā)函數(shù)。

$.ajaxError()和$.ajaxSuccess()

$.ajaxError() Ajax請(qǐng)求出錯(cuò)時(shí)注冊(cè)一個(gè)回調(diào)處理函數(shù)，這是一個(gè)Ajax Event。

$.ajaxuccess() 綁定一個(gè)函數(shù)當(dāng)Ajax請(qǐng)求成功完成時(shí)執(zhí)行， 這是一個(gè)AjaxEvent。

總結(jié)

關(guān)于前后端用數(shù)據(jù)Ajax實(shí)現(xiàn)就先到這吧，$.ajax()此方法是最底層的方法并未展，但的確在今后實(shí)踐生產(chǎn)是用得最多的，get和post 區(qū)別也是需要清楚的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98855.html

相關(guān)文章

  • jQuery ajax 源碼分析之預(yù)處理和分發(fā)函數(shù)(prefilter/transport)

    摘要：調(diào)用的情況下，我們通常用來(lái)請(qǐng)求數(shù)據(jù)的方法有前五種方法，在的實(shí)現(xiàn)中，本質(zhì)上還是在調(diào)用第六種方法實(shí)現(xiàn)的單純?cè)谠创a中看前五個(gè)函數(shù)，代碼量都很少，多一點(diǎn)也就是函數(shù)，涉及到了的寫(xiě)法，在調(diào)用成功時(shí)，對(duì)返回的數(shù)據(jù)使用內(nèi)部方法進(jìn)行渲 調(diào)用jQuery 的情況下，我們通常用來(lái)請(qǐng)求數(shù)據(jù)的方法有 $(element).load(url, callback) $.get(url, data, callbac...

    he_xd 評(píng)論0 收藏0

  • 原生JS與jQuery對(duì)AJAX的實(shí)現(xiàn)

    摘要：原生與對(duì)的實(shí)現(xiàn)一定義里這么解釋異步的和。二原生實(shí)現(xiàn)所有現(xiàn)代瀏覽器以及均內(nèi)建對(duì)象。一般是正常未找到頁(yè)面，一般是錯(cuò)誤，或者后臺(tái)沒(méi)有創(chuàng)建相應(yīng)的內(nèi)部服務(wù)錯(cuò)誤，多為后臺(tái)錯(cuò)誤。基本上通過(guò)發(fā)送的數(shù)據(jù)及傳回的數(shù)據(jù)就能定位問(wèn)題所在了。 原生JS與jQuery對(duì)AJAX的實(shí)現(xiàn) 一、定義 W3C里這么解釋AJAX： AJAX = Asynchronous JavaScript and XML（異步的 Jav...

    Chaz 評(píng)論0 收藏0

  • 通過(guò) ES6 Promise 和 jQuery Deferred 的異同學(xué)習(xí) Promise

    摘要：和和都有和，但是略有不同。實(shí)際上返回的是一個(gè)對(duì)象。和添加的回調(diào)，添加的回調(diào)。所以在調(diào)用成功的情況下執(zhí)行添加的回調(diào)，調(diào)用失敗時(shí)執(zhí)行添加的回調(diào)。，產(chǎn)生對(duì)象并，產(chǎn)生對(duì)象并，然后繼續(xù)處理，的語(yǔ)法糖，和的差不多但不同。 Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise，但是略有不同。不過(guò)它們的作用可以簡(jiǎn)單的用兩句話來(lái)描述 Deffere...

    Yujiaao 評(píng)論0 收藏0

  • Ajax設(shè)置請(qǐng)求和接收響應(yīng)、自己封裝簡(jiǎn)易jQuery.Ajax、回調(diào)函數(shù)

    摘要：設(shè)置請(qǐng)求和接收響應(yīng)自己封裝簡(jiǎn)易這篇文章是承接前幾篇博客的是前幾篇繼續(xù)學(xué)習(xí)包括學(xué)習(xí)與理解和簡(jiǎn)化版自己實(shí)現(xiàn)等這篇文章只算是我的個(gè)人學(xué)習(xí)筆記內(nèi)容沒(méi)有精心排版一些錯(cuò)誤請(qǐng)見(jiàn)諒所有代碼都在這里從歷史可以看到所有代碼擺闊一個(gè)簡(jiǎn)易的服務(wù)器所有代碼在歷史里 Ajax設(shè)置請(qǐng)求和接收響應(yīng)、自己封裝簡(jiǎn)易jQuery.Ajax 這篇文章是承接前幾篇博客的,是前幾篇繼續(xù)學(xué)習(xí)包括Ajax學(xué)習(xí)與理解和簡(jiǎn)化版自己實(shí)現(xiàn)j...

    Harpsichord1207 評(píng)論0 收藏0

  • jquery ajax 方法封裝說(shuō)明

    摘要：簡(jiǎn)要說(shuō)明前面我寫(xiě)了一篇方法封裝及文件設(shè)計(jì)文檔，主要用來(lái)說(shuō)明我們?cè)陧?xiàng)目中通常會(huì)對(duì)的方法進(jìn)行進(jìn)一步的封裝處理，便于我們?cè)跇I(yè)務(wù)代碼中使用。這篇文檔我們主要對(duì)封裝的方法進(jìn)行一個(gè)簡(jiǎn)要說(shuō)明。 簡(jiǎn)要說(shuō)明 前面我寫(xiě)了一篇《jquery ajax 方法封裝及 api 文件設(shè)計(jì)》文檔，主要用來(lái)說(shuō)明我們?cè)陧?xiàng)目中通常會(huì)對(duì) jquery 的 ajax 方法進(jìn)行進(jìn)一步的封裝處理，便于我們?cè)跇I(yè)務(wù)代碼中使用。從那篇文...

    z2xy 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

scwang90

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<