AJAX和JSON是在Web開發中常用的兩個技術，它們可以實現動態地獲取和顯示數據。在本文中，我們將探討如何使用AJAX和JSON來提交和顯示一個列表。通過一個實際的例子，我們將展示如何使用AJAX通過JSON格式來提交數據并在頁面上顯示。

假設我們正在開發一個待辦清單應用程序，用戶可以通過輸入框提交任務并在頁面上顯示。我們將使用AJAX來實現實時的任務提交和顯示，以提升用戶體驗。

首先，我們需要在HTML頁面上創建一個表單和一個用于顯示任務列表的容器。表單中包含一個輸入框和一個提交按鈕，用戶可以在輸入框中輸入任務，并通過點擊按鈕提交。任務列表容器用于顯示已提交的任務。

<form id="task-form"><input type="text" id="task-input" placeholder="輸入任務"><button type="submit">提交</button></form><div id="task-list"></div>

接下來，我們將使用AJAX和JSON來實現任務的提交和顯示。我們將使用jQuery框架簡化代碼的編寫過程。

// 使用jQuery的AJAX函數來實現表單提交
$('#task-form').submit(function(e) {
e.preventDefault(); // 阻止頁面刷新
var task = $('#task-input').val(); // 獲取輸入框中的值
// 使用AJAX發送一個POST請求來提交任務
$.ajax({
url: '/submit-task',
type: 'POST',
data: JSON.stringify({ task: task }), // 使用JSON格式化數據
contentType: 'application/json',
success: function(response) {
// 提交成功后，在任務列表容器中添加一個新的任務項
$('#task-list').append('<div>'+ task + '</div>');
},
error: function(error) {
console.log(error);
}
});
// 清空輸入框
$('#task-input').val('');
});

在上面的代碼中，我們通過監聽表單的submit事件來處理任務的提交。當用戶點擊提交按鈕時，執行回調函數。在回調函數中，我們首先阻止表單的默認提交行為，然后獲取輸入框中的任務。接下來，使用AJAX發送一個POST請求來將任務提交到服務器。我們使用JSON.stringify()方法將任務數據轉換為JSON字符串，并設置content-type為application/json來告知服務器我們發送的是JSON數據。

如果服務器成功處理了請求并返回一個成功的響應，則通過回調函數來處理返回的結果。我們在任務列表容器中添加一個新的任務項，內容為剛剛提交的任務。如果發生錯誤，則通過error回調函數來處理。

通過以上的代碼，我們實現了一個簡單的待辦清單應用程序，用戶可以通過輸入框提交任務，并實時在頁面上顯示。使用AJAX和JSON可以使頁面不用刷新即可實現數據的動態更新，提供了更好的用戶體驗。

總結來說，AJAX和JSON是Web開發中非常有用的技術，可以實現數據的實時提交和顯示。通過本文的例子，我們展示了如何使用AJAX和JSON來提交和顯示一個任務列表。希望本文能夠幫助你更好地理解和應用AJAX和JSON的知識。