jQuery中Ajax的load方法詳解_jquery

先來看一個Ajax範例

複製程式碼 程式碼如下:

   
   

test.jsp的內容：

複製程式碼 程式碼如下:

下面來看下jQuery中的Ajax

1.load()

　　load()方法是jQuery中最為簡單、常用的Ajax方法，能遠端載入HTML程式碼並插入DOM。

遠端HTML程式碼：

複製程式碼 程式碼如下:

   
   

   

張三:

   

沙發.

   

李四:

   

板凳.

   

王五:

   

地板.

load()載入HTML

複製程式碼 程式碼如下:

   
   
   
   

已有評論

load()載入篩選後的HTML文件

複製程式碼 程式碼如下:

   
   
   
        * { 邊距：0;填入：0;}
        正文 { font-size:12px;}
        .comment { 邊距上方：10px;內邊距：10px；邊框：1px 實心#ccc；背景：#DDD；}
        .comment h6 { 字體粗細：700;字體大小：14px;}
        .para { 頂部邊距：5px;文字縮排：2em；背景：#DDD；}
    樣式>
    標題>
頭>

已有評論

身體>

    $(函數 () {
        $("#send").click(function () {
            $("#resText").load("test.html .para");
        });
    })
    /**
     * 篩選載入的HTML文件
     *
     * load()方法的URL參數的語法結構為："url selector"，注意URL與選擇器之間有一個空格
     *
     * load()方法的傳遞方式是根據參數data自動指定。
     *      若沒有參數傳遞，則以GET方式傳遞；
     *      反之，則會自動轉換為POST傳遞
     *
     * **/
腳本>

load()方法---回呼函數

複製程式碼程式碼如下：

   
   
   
        * { 邊距：0;填入：0;}
        正文 { font-size:12px;}
        .comment { 邊距上方：10px;內邊距：10px；邊框：1px 實心#ccc；背景：#DDD；}
        .comment h6 { 字體粗細：700;字體大小：14px;}
        .para { 頂部邊距：5px;文字縮排：2em；背景：#DDD；}
    樣式>
    標題>
頭>

已有評論

身體>

    $(函數 () {
        $("#send").click(function () {
            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
                警報($(this).html());
                alert(responseText);//要求回傳的內容物
                alert(textStatus);//請求狀態：成功、錯誤、未修改、逾時
                alert(XMLHttpRequest);//XMLHttpRequest物件
            });
        });
    })
    /**
     *
     * load()方法的回呼參數
     *
     * **/
腳本>

結束

以上就是本文的全部內容了，希望對大家能有所幫助。