jQuery AJAX

jQuery AJAX Reference

AJAX = Asynchronous JavaScript and XML

AJAX 是用於在後台加載數據顯示數據於網頁上，並且無需重新載入整個網頁。

load()

load() 方法從服務端載入數據，並且將返回的數據放入所選擇的元素中。

語法： $(selector).load(URL,data,callback);

必要參數： URL 設定從何處載入數據

可選參數： data 設定同請求一起發送的查詢字符串集合 key/value

可選參數： callback 設定數據載入完成之後執行的回調函數

$(document).ready(function(){    $("button").click(function(){        $("#div1").load("demo_test.txt");    });});

此方法中同時允許加入 jQuery selector 在 URL 參數中

此方法中的選擇器對應所載入數據中的特別元素

$(document).ready(function(){    $("button").click(function(){        $("#div1").load("demo_test.txt #p1");    });});

回調函數可以擁有不同的參數

• responseTxt - 若呼叫成功，此參數包含結果內容
• statusTxt - 包含呼叫的狀態
• xhr - 包含 XMLHttpRequest 對象

$(document).ready(function(){    $("button").click(function(){        $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){            if(statusTxt == "success")                alert("External content loaded successfully!");            if(statusTxt == "error")                alert("Error: " + xhr.status + ": " + xhr.statusText);        });    });});

get() & post()

用以通過發送 GET or POST 請求向服務端請求數據

• GET - 向指定的資源請求數據
• POST - 想指定的資源提交將要處理的數據

GET 僅用於向服務端請求數據。注意此方法可能返回緩存的數據。

POST 也能被用於向服務端請求數據。不過，此方法從不緩存數據，並且它經常用來隨著請求一同發送數據。

更多介紹請參考： HTTP Methods GET vs POST

$.get()

語法： $.get(URL,callback);

必要參數： URL 設定從何處載入數據

可選參數： callback 設定請求成功後被執行的函數

$(document).ready(function(){    $("button").click(function(){        $.get("demo_test.asp", function(data, status){            alert("Data: " + data + "\nStatus: " + status);        });    });});

$.post()

語法： $.post(URL,data,callback);

必要參數： URL 設定從何處載入數據

可選參數： data 設定隨同請求一起被發送的數據

可選參數： callback 設定請求成功後被執行的函數

$(document).ready(function(){    $("button").click(function(){        $.post("demo_test_post.asp",        {          name: "Donald Duck",          city: "Duckburg"        },        function(data,status){            alert("Data: " + data + "\nStatus: " + status);        });    });});