Ajax（Asynchronous JavaScript and XML）是一種用于創建快速交互式網頁應用的技術。通過使用Ajax，我們可以在不重新加載整個網頁的情況下，向服務器發送和接收數據。本文將重點介紹如何使用Ajax發送 POST 請求，并將數據作為請求體（post body）發送給服務器。通過這種方式，我們可以發送復雜的數據給服務器，并從服務器接收響應。

首先，我們來看一個使用Ajax發送 POST 請求，并將數據作為請求體發送給服務器的簡單示例：

$.ajax({
type: 'POST',
url: '/api/example',
data: JSON.stringify({ name: 'John', age: 25 }),
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});

在上面的示例中，我們使用了jQuery的Ajax方法來發送 POST 請求。首先，我們指定請求的類型為 POST，然后指定請求的URL為 '/api/example'。接下來，我們使用JSON.stringify將一個包含姓名和年齡的對象轉換為字符串，并將其作為數據參數傳遞給Ajax方法。在成功的回調函數中，我們打印服務器的響應。如果請求出現錯誤，則會調用錯誤回調函數。

通過這種方式，我們可以發送復雜的數據結構給服務器。例如，我們可以發送一個商品的信息：

var product = {
name: 'iPhone',
price: 999,
description: 'The latest iPhone model.'
};
$.ajax({
type: 'POST',
url: '/api/products',
data: JSON.stringify(product),
success: function(response) {
console.log(response);
},
error: function(error) {
console.error(error);
}
});

在上面的示例中，我們創建了一個包含商品名稱、價格和描述的對象。然后，我們將該對象作為請求的數據發送給服務器。服務器可以使用這些數據來創建一個新的商品記錄，并返回新創建的商品的詳細信息。

除了使用jQuery的Ajax方法，我們也可以使用原生的JavaScript來實現這個功能。下面是一個使用原生JavaScript發送 POST 請求，并將數據作為請求體發送給服務器的示例：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/example", true);
xhr.setRequestHeader("Content-Type", "application/json");
var data = JSON.stringify({ name: 'John', age: 25 });
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.onerror = function(error) {
console.error(error);
};
xhr.send(data);

在上面的示例中，我們首先創建了一個XMLHttpRequest對象，并使用open方法指定請求的類型、URL和是否異步。然后，我們使用setRequestHeader方法設置請求的Content-Type為 "application/json"。接下來，我們將待發送的數據轉換成字符串，并調用send方法發送請求。在狀態改變的回調函數中，我們判斷請求是否成功完成，并打印服務器的響應結果。如果請求出現錯誤，則會調用錯誤回調函數。

總結來說，通過使用Ajax發送 POST 請求，并將數據作為請求體發送給服務器，我們可以實現與服務器的復雜數據交互。無論是使用jQuery還是原生JavaScript方法，我們都可以方便地發送數據給服務器并接收響應。這種方式在創建交互式網頁應用時非常有用。希望本文對你理解和使用Ajax發送 POST 請求提供了一些幫助。