Ajax是一種常用的網頁開發技術，可以實現異步加載和更新頁面的功能。其中，通過Ajax提交POST請求并接收JSON數據是比較常見的應用場景之一。本文將以一個簡單的例子來演示如何使用Ajax提交POST請求并接收JSON數據，并給出具體的代碼實現。

假設我們有一個表單，用戶可以在里面輸入姓名和年齡，然后點擊提交按鈕。點擊提交按鈕后，我們希望將用戶輸入的數據通過Ajax提交到服務器，并接收服務器返回的JSON數據。根據服務器返回的數據，我們可以更新頁面中的某些內容，或者執行其他需要的操作。

首先，我們需要在HTML文件中添加一個表單，并給表單中的元素設置相應的id屬性和name屬性，以便可以通過JavaScript獲取用戶輸入的數據。代碼如下：

<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br>
<label for="age">年齡：</label>
<input type="number" id="age" name="age"><br>
<button type="button" onclick="submitForm()">提交</button>
</form>

接下來，我們需要編寫JavaScript代碼，在用戶點擊提交按鈕時，獲取表單數據，并使用Ajax提交POST請求到服務器。代碼如下：

function submitForm() {
var form = document.getElementById("myForm");
var name = form.elements["name"].value;
var age = form.elements["age"].value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理服務器返回的JSON數據
// ...
}
};
var data = JSON.stringify({ name: name, age: age });
xhr.send(data);
}

在上述代碼中，我們首先獲取表單元素和用戶輸入的數據，然后創建一個XMLHttpRequest對象，并通過open方法指定請求的方法、URL和是否異步。接著，我們通過setRequestHeader方法設置請求頭，告訴服務器發送的數據是JSON類型。在xhr.onreadystatechange事件中，我們檢查XMLHttpRequest對象的狀態和狀態碼，如果已完成且狀態碼為200，即表示服務器返回了正確的響應。然后，我們可以通過JSON.parse方法將服務器返回的JSON字符串解析成JavaScript對象，進而進行后續的處理。

最后，我們需要在服務器端編寫相應的代碼，接收POST請求，并以JSON格式返回數據。由于不同的服務器端語言和框架有不同的實現方式，這里就不展開討論了。在本例中，我們假設后端服務器使用的是Node.js和Express框架，代碼如下：

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.post("/api", (req, res) => {
const name = req.body.name;
const age = req.body.age;
// 進行相應的數據處理
// ...
const response = {
message: "提交成功",
data: { name: name, age: age }
};
res.json(response);
});
app.listen(3000, () => {
console.log("服務器已啟動");
});

在上述代碼中，我們使用了Express框架提供的bodyParser中間件來解析POST請求中的JSON數據。然后，我們可以通過req.body來獲取請求體中的數據。在本例中，我們將獲取到的數據進行相應的處理，然后構造一個包含消息和數據的JSON對象，并通過res.json方法將其返回給客戶端。

通過上述的示例代碼，我們可以看到，使用Ajax提交POST請求并接收JSON數據并不復雜。只需在前端編寫好相應的JavaScript代碼，后端服務器端接收請求并返回JSON數據即可。這種方式可以快速、實時地更新頁面內容，提高用戶體驗。