近年來，Ajax（Asynchronous JavaScript and XML）技術在Web開發中的應用越來越廣泛。Ajax可以在不重新加載整個頁面的情況下與服務器進行數據交換，能夠提升用戶體驗。在使用Ajax進行數據交互時，JSON（JavaScript Object Notation）成為了一種常用的數據格式。本文將介紹如何使用Ajax傳遞JSON數據，并通過舉例來說明其使用方法和實際應用。

一種典型的情況是，我們希望通過Ajax將用戶在表單中輸入的數據提交給服務器，并獲取服務器返回的數據進行展示。假設我們有一個簡單的登錄表單，包含用戶名和密碼兩個輸入框。用戶在表單中輸入信息后，點擊提交按鈕，表單數據將以JSON格式發送給服務器。以下是使用jQuery庫的示例代碼：

$('form').submit(function(event) {
// 阻止表單提交的默認行為
event.preventDefault();
// 獲取用戶名和密碼輸入框的值
var username = $('#username').val();
var password = $('#password').val();
// 將數據封裝為JSON對象
var data = {
username: username,
password: password
};
// 發送Ajax請求
$.ajax({
url: '/login',
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
success: function(response) {
// 處理服務器返回的數據
console.log(response);
// ...
}
});
});

在上述代碼中，我們使用了jQuery庫提供的ajax函數來發送Ajax請求。首先，我們阻止了表單的默認提交行為，以便自己處理數據交互。接著，我們獲取了用戶名和密碼輸入框的值，并將其封裝為一個JSON對象。最后，我們通過ajax函數發送POST請求到服務器的/login路由，并攜帶了封裝好的JSON數據。服務器在收到請求后，根據提交的數據進行身份驗證，并返回相應的響應數據。在這個例子中，我們將響應數據打印到了控制臺上，你可以根據實際需求進行相關處理。

除了向服務器發送數據，通過Ajax傳遞JSON數據還可以用于獲取服務器上的數據進行展示。例如，我們希望在頁面上顯示一些由服務器動態生成的數據，如最新的新聞列表。以下是一個使用純JavaScript實現的示例代碼：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析服務器返回的JSON數據
var response = JSON.parse(xhr.responseText);
// 處理數據
console.log(response);
// ...
}
};
xhr.open('GET', '/latest_news', true);
xhr.send();

在這個例子中，我們創建了一個XMLHttpRequest對象，并添加了一個回調函數來處理服務器的響應。該回調函數在readyState為4（即請求已完成）且status為200（即成功）時被觸發。我們首先解析服務器返回的JSON數據，并進行相應的數據處理。這樣，我們就可以在控制臺上打印出最新的新聞列表。需要注意的是，這個示例中使用的是GET請求，你可以根據具體情況選擇合適的請求方式。

總的來說，通過Ajax傳遞JSON數據已成為現代Web開發中的常見需求。通過本文所述的方法和示例，你可以輕松地將JSON數據發送給服務器并處理服務器的響應數據。無論是提交表單數據還是獲取服務器上的數據進行展示，Ajax和JSON的結合能夠大大提升用戶體驗，并使Web應用更加靈活和交互性。