使用AJAX提交JSON列表是一個常見的需求，特別是在前后端分離的Web開發中。通過AJAX提交JSON列表，可以實現前端與后端之間的數據交互，并且可以處理大量的數據，提高用戶體驗。在本文中，我們將介紹AJAX提交JSON列表的基本原理和示例代碼。 假設我們有一個簡單的待辦事項列表，每個待辦事項都有一個唯一的ID和一個描述。用戶在頁面上可以添加新的待辦事項，并且可以通過AJAX將新的待辦事項列表提交給服務器進行保存。服務器會將新的待辦事項加入到數據庫中，并返回保存成功的響應。 首先，我們需要在前端頁面中添加一個表單，用于接收用戶輸入的新待辦事項。用戶輸入的數據將被以JSON的格式進行封裝，再通過AJAX發送給服務器。以下是一個簡單的示例代碼，展示了如何使用AJAX提交JSON列表：

<form id="todo-form">
<input type="text" id="todo-description" placeholder="請輸入待辦事項描述">
<button type="submit">添加</button>
</form>
<script>
document.getElementById("todo-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單提交默認行為
var todoDescription = document.getElementById("todo-description").value;
var todoList = {
todos: [
{
id: 1,
description: todoDescription
}
]
};
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/todos", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("待辦事項已成功添加！");
}
};
xhr.send(JSON.stringify(todoList));
});
</script>

在上述示例代碼中，我們首先獲取用戶輸入的待辦事項描述，然后將其封裝為一個JSON對象。這個JSON對象包含一個名為"todos"的數組，數組中每個元素都是一個對象，有一個唯一的ID和描述。接著，我們創建一個XMLHttpRequest對象，并通過open方法指定請求的方法和URL。在設置請求頭時，我們指定了"Content-Type"為"application/json"，表示請求體的內容是JSON格式的數據。在發送請求之前，我們為XMLHttpRequest對象的onreadystatechange事件添加了一個回調函數，用于處理服務器響應。當服務器響應狀態為4（即請求已完成）且狀態碼為200時，我們彈出提示框，通知用戶待辦事項已成功添加。 在前端的工作完成后，我們需要在服務器端編寫接收并保存待辦事項的代碼。以下是一個基于Node.js的示例代碼，用于處理接收到的JSON列表：

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
app.post("/api/todos", (req, res) => {
const todoList = req.body;
// 將todoList保存到數據庫中
res.sendStatus(200);
});
app.listen(8080, () => {
console.log("服務器已啟動，監聽端口8080");
});

在上述示例代碼中，我們使用了Express框架來創建一個簡單的HTTP服務器。通過app.use(bodyParser.json())中間件，我們告訴服務器在處理請求之前，將請求體的內容解析為JSON格式。接著，我們定義了一個POST路由"/api/todos"，在該路由中，我們從req.body中獲取到前端發送過來的待辦事項列表，并將其保存到數據庫中。最后，我們發送一個狀態碼為200的響應，表示請求已成功處理。 通過以上的前端和后端代碼示例，我們可以實現使用AJAX提交JSON列表的功能。用戶在前端頁面中填寫待辦事項描述，點擊“添加”按鈕后，將觸發一個AJAX請求，向服務器提交JSON格式的待辦事項列表。服務器接收到請求后，將數據保存到數據庫，并返回一個保存成功的響應。這樣，即使頁面不刷新，用戶也能看到新添加的待辦事項。 總結起來，AJAX提交JSON列表是一種十分常見和實用的技術，在現代Web開發中被廣泛應用。通過AJAX，前端與后端之間可以進行高效的數據交互，提升用戶體驗，實現動態化的頁面更新。希望本文能夠對你理解AJAX提交JSON列表有所幫助，并能在實際的開發中加以運用。