在現代Web開發中，Ajax是一種常用的技術，它可以通過在不刷新整個頁面的情況下向服務器發送請求，獲取響應并更新頁面的部分內容。一種常見的應用場景是通過Ajax提交用戶輸入的數據到服務器，服務器根據數據進行處理，并返回一個JSON格式的響應。本文將重點介紹如何使用Ajax來提交input數據，并解析服務器返回的JSON數據。

假設我們有一個簡單的表單，其中包含一個輸入框和一個提交按鈕。用戶在輸入框中輸入內容后，點擊提交按鈕將觸發Ajax請求，將輸入的數據發送給服務器。以下是一個示例的HTML代碼：

<form id="myForm">
<input type="text" id="inputData" name="inputData" placeholder="請輸入內容">
<button type="button" id="submitButton">提交</button>
</form>

在上述代碼中，我們使用了一個form元素來包裹輸入框和提交按鈕，這樣當用戶按下回車鍵時，也可以觸發表單的提交事件。input元素的id屬性為"inputData"，我們將通過該id來獲取用戶輸入的數據。button元素的id屬性為"submitButton"，我們將通過該id來綁定點擊事件。

接下來，我們需要使用JavaScript代碼來編寫Ajax請求，并處理服務器返回的JSON數據。以下是一個示例的JavaScript代碼：

document.getElementById("submitButton").addEventListener("click", function() {
var inputData = document.getElementById("inputData").value;
// 創建一個XmlHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求的類型、URL和是否異步
xhr.open("POST", "/submit", true);
// 設置請求頭部信息
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
// 處理服務器返回的JSON數據
// ...
}
};
// 將輸入數據轉換為JSON字符串
var requestData = JSON.stringify({inputData: inputData});
// 發送Ajax請求
xhr.send(requestData);
});

在上述代碼中，我們首先通過getElementById方法獲取輸入框和提交按鈕的DOM元素，然后使用addEventListener方法給提交按鈕添加點擊事件監聽器。當按鈕被點擊時，會執行回調函數，該函數將獲取輸入框的值，并將其存儲在inputData變量中。

接下來，我們創建一個XmlHttpRequest對象，該對象用于發送Ajax請求。我們使用open方法指定請求的類型為"POST"，URL為"/submit"，同時設置是否異步為true。然后，我們使用setRequestHeader方法設置請求頭部信息，告訴服務器我們發送的數據為JSON格式。

接著，我們使用onreadystatechange事件監聽器來監聽請求狀態的變化。當請求狀態變為XMLHttpRequest.DONE且請求的HTTP狀態碼為200時，說明請求成功，并且服務器返回了響應數據。我們首先使用JSON.parse方法將服務器返回的JSON字符串轉換為JavaScript對象，然后可以根據返回的數據，進行相應的處理。

最后，我們使用JSON.stringify方法將輸入數據轉換為JSON字符串，并使用send方法發送Ajax請求。這樣，當用戶點擊提交按鈕時，輸入的數據將被發送到服務器，并且服務器返回的JSON數據將被處理。

通過以上的步驟，我們成功地使用了Ajax來提交input數據，并解析服務器返回的JSON數據。通過這種方式，我們可以實現更加靈活和用戶友好的數據交互，提升Web應用的用戶體驗。