jQuery 是目前最為流行的 JavaScript 庫(kù)之一，它為 web 開發(fā)者提供了非常便捷的開發(fā)方式。在 jQuery 中，其中一項(xiàng)重要功能就是 AJAX。AJAX是瀏覽器和服務(wù)器之間異步通信的技術(shù)，它不需要刷新整個(gè)頁(yè)面就能夠獲取到需要的數(shù)據(jù)。

使用 jQuery AJAX 發(fā)送 POST 請(qǐng)求

使用 jQuery AJAX 發(fā)送 POST 請(qǐng)求非常簡(jiǎn)單。首先我們需要使用 $.post() 方法。

$.post(url, data, function(response) {
// 處理服務(wù)器的響應(yīng)
});

其中，url 表示需要發(fā)送請(qǐng)求的地址，data 表示需要發(fā)送的數(shù)據(jù)，response 則是服務(wù)器返回的響應(yīng)內(nèi)容。下面是一個(gè)實(shí)例。

$.post("/api/login", {username: "admin", password: "123456"}, function(response) {
console.log(response);
});

在上述代碼中，我們向 /api/login 發(fā)送了一條 POST 請(qǐng)求，并且?guī)в?username 和 password 這兩個(gè)數(shù)據(jù)。當(dāng)服務(wù)器返回響應(yīng)時(shí)，我們將響應(yīng)內(nèi)容輸出到控制臺(tái)。

使用 jQuery AJAX 發(fā)送 GET 請(qǐng)求

與發(fā)送 POST 請(qǐng)求相比，使用 jQuery AJAX 發(fā)送 GET 請(qǐng)求也很簡(jiǎn)單。我們只需要使用 $.get() 方法。

$.get(url, function(response) {
// 處理服務(wù)器的響應(yīng)
});

其中，url 仍然表示需要發(fā)送請(qǐng)求的地址，response 表示服務(wù)器返回的響應(yīng)內(nèi)容。下面是一個(gè)實(shí)例。

$.get("/api/users", function(response) {
console.log(response);
});

在上述代碼中，我們向 /api/users 發(fā)送了一條 GET 請(qǐng)求。當(dāng)服務(wù)器返回響應(yīng)時(shí)，我們將響應(yīng)內(nèi)容輸出到控制臺(tái)。

AJAX 發(fā)送的數(shù)據(jù)格式

在發(fā)送 AJAX 請(qǐng)求時(shí)，我們可以使用各種不同的數(shù)據(jù)格式。以下是 AJAX 請(qǐng)求中使用的主要數(shù)據(jù)格式。

application/x-www-form-urlencoded

在這種數(shù)據(jù)格式中，數(shù)據(jù)被編碼為鍵值對(duì)，每個(gè)鍵值對(duì)之間用 & 符號(hào)分隔。

$.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);
}
});