jQuery中的ajax應(yīng)用

jQuery對ajax進行了3層封裝。最底層為$.ajax()方法、第2層為load(),$get(),$post()方法、最高層為$.getScript(),$.getJSON()方法。

load方法通常用于從web服務(wù)器中獲取靜態(tài)的數(shù)據(jù)文件,主要功能是載入遠程HTML代碼并插入DOM中,結(jié)構(gòu)為

load(url, [, data] [, callback])

url為請求HTML頁面的URL地址,data為發(fā)送給服務(wù)器的key/value數(shù)據(jù),callbakc為請求完成時的回調(diào)函數(shù)。

這個方法可以這么用:

$("#resText").load("test.html");

調(diào)用上面的代碼后,test.html頁面就會被載入到DOM元素中。

在實際開發(fā)中最常用的是get和post方法,這兩個方法是jQuery的全局函數(shù),之前講的所以方法都是對jQuery對象進行操作。

$.get()方法使用GET方式進行異步請求,結(jié)構(gòu)為:

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

url為請求頁面的url地址,data為發(fā)送至服務(wù)器的key/value數(shù)據(jù),callback為載入成功時的回調(diào)函數(shù),type為服務(wù)器端返回內(nèi)容的格式。

其它參數(shù)都是很簡單的,主要是看一下回調(diào)函數(shù)有哪些參數(shù):

function(data, textStatus){
  //data : 返回的內(nèi)容,可以是xml, json, html片段等
  //textStatus : 請求狀態(tài): success, error, notmodified, timeout4種
}

$.get()和$.post()只有等textStatus狀態(tài)為success時回調(diào)函數(shù)才會被調(diào)用。

如果返回的是xml文檔,那么可以用jquery中的attr,find filter方法進行處理。

$post()方法實際上跟$get()方法的使用方法差不多,只是背后的原理不同。

接下來講一下jQuery提供的最高層方法getScript和getJSON方法。

有時候,在頁面初次加載的時候載入所有的js文件是沒有必要的,我們可以動態(tài)引入js文件:

$(document.createElement("script")).attr("src", "test.js").appendTo("head");//方法1
$("<script type='text/javascript' src='test.js' />").appendTo("head");//方法2

$(function(){
  $("#send").click(function(){
    $.getScript("test.js");
  });
}).ready();//方法3

$.getScript方法也有回調(diào)函數(shù),在js文件成功加載之后調(diào)用。方法3加載完JS文件之后,js文件會自動執(zhí)行。

$.getJSON方法的使用方式和getScript一樣,但是前者的回調(diào)函數(shù)一般需要寫明要如何處理回載的JSON數(shù)據(jù)?;卣{(diào)函數(shù)有一個data的參數(shù),表示JSON對象。

要遍歷JSON對象可以使用jQuery中的$.each方法,這個方法用于遍歷對象和數(shù)組。

$.each方法第1個參數(shù)為一個數(shù)組或一個對象,第2個參數(shù)為一個回調(diào)函數(shù),回調(diào)函數(shù)擁有2個參數(shù):第1個為對象的成員或數(shù)組的索引,第2個為對應(yīng)變量或內(nèi)容。如果回調(diào)函數(shù)中返回false那么遍歷將結(jié)束。

將下來講最底層的方法$.ajax方法,jQuery中所有的ajax方法都是通過這個方法實現(xiàn)的,也就是說這個方法可以替換之前講的所有ajax方法。

它的結(jié)構(gòu)為:

$.ajax(option);

這個方法只有一個參數(shù),參數(shù)是一個對象,這個對象包含了所需要的請求設(shè)置,以及回調(diào)函數(shù)等信息,參數(shù)以key/value的形式存在,所有的參數(shù)都是可選的。重要的參數(shù)有url,type,complete,success等。

在使用jQuery之前,網(wǎng)頁異步提交表單的時候只能把每個表單元素的值一個一個讀出來然后格式化后發(fā)送到服務(wù)器,現(xiàn)在可以使用jQuery中的serialize方法。

    $("#send").click(function(){
        $.get("get1.php", $("#form1").serialize(), function(data, textStatus){
            $("#resText").html(data);
        });
    });

調(diào)用這個方法就相當表將表格里的數(shù)據(jù)用key/value方法發(fā)送給服務(wù)器端了。如果修改了表單,增加了表單元素,那么也不用將這段代碼進行修改。

jQuery還為ajax請求設(shè)置了全局事件。$.ajaxStart()和$.ajaxStop(),分別在網(wǎng)頁發(fā)起ajax請求和ajax請求完成時調(diào)用,這2個函數(shù)的參數(shù)為一個回調(diào)函數(shù)。

關(guān)于jQuery暫時先學習到這里,我認為寫這些文章跟寫程序一樣,從來不會完成,應(yīng)該要一直更新,目前jQuery學習告一段落,如果以后的項目中還需要學習關(guān)于jQuery新的知識,我一定再把學習心得寫上來。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容