jQuery 是目前最為流行的 JavaScript 庫之一,它為 web 開發(fā)者提供了非常便捷的開發(fā)方式。在 jQuery 中,其中一項(xiàng)重要功能就是 AJAX。AJAX是瀏覽器和服務(wù)器之間異步通信的技術(shù),它不需要刷新整個頁面就能夠獲取到需要的數(shù)據(jù)。
使用 jQuery AJAX 發(fā)送 POST 請求
使用 jQuery AJAX 發(fā)送 POST 請求非常簡單。首先我們需要使用 $.post() 方法。
$.post(url, data, function(response) { // 處理服務(wù)器的響應(yīng) });
其中,url 表示需要發(fā)送請求的地址,data 表示需要發(fā)送的數(shù)據(jù),response 則是服務(wù)器返回的響應(yīng)內(nèi)容。下面是一個實(shí)例。
$.post("/api/login", {username: "admin", password: "123456"}, function(response) { console.log(response); });
在上述代碼中,我們向 /api/login 發(fā)送了一條 POST 請求,并且?guī)в?username 和 password 這兩個數(shù)據(jù)。當(dāng)服務(wù)器返回響應(yīng)時,我們將響應(yīng)內(nèi)容輸出到控制臺。
使用 jQuery AJAX 發(fā)送 GET 請求
與發(fā)送 POST 請求相比,使用 jQuery AJAX 發(fā)送 GET 請求也很簡單。我們只需要使用 $.get() 方法。
$.get(url, function(response) { // 處理服務(wù)器的響應(yīng) });
其中,url 仍然表示需要發(fā)送請求的地址,response 表示服務(wù)器返回的響應(yīng)內(nèi)容。下面是一個實(shí)例。
$.get("/api/users", function(response) { console.log(response); });
在上述代碼中,我們向 /api/users 發(fā)送了一條 GET 請求。當(dāng)服務(wù)器返回響應(yīng)時,我們將響應(yīng)內(nèi)容輸出到控制臺。
AJAX 發(fā)送的數(shù)據(jù)格式
在發(fā)送 AJAX 請求時,我們可以使用各種不同的數(shù)據(jù)格式。以下是 AJAX 請求中使用的主要數(shù)據(jù)格式。
application/x-www-form-urlencoded
在這種數(shù)據(jù)格式中,數(shù)據(jù)被編碼為鍵值對,每個鍵值對之間用 & 符號分隔。
$.post("/api/login", "username=admin&password=123456", function(response) { console.log(response); });
application/json
在這種數(shù)據(jù)格式中,數(shù)據(jù)被編碼為 JSON 格式。
$.post("/api/login", JSON.stringify({username: "admin", password: "123456"}), function(response) { console.log(response); }, "json");
multipart/form-data
在這種數(shù)據(jù)格式中,數(shù)據(jù)以表單形式提交,適用于上傳文件。
var formData = new FormData(); formData.append("file", file); $.ajax({ url: "/api/upload", type: "POST", dataType: "json", data: formData, contentType: false, processData: false, success: function(response) { console.log(response); } });