AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步通信的技術，它可以使網頁無需刷新頁面即可發送和接收數據。在實際應用中，我們經常使用JSON（JavaScript Object Notation）格式來傳輸數據。JSON是一種輕量級的數據交換格式，它易于閱讀和編寫，并且支持多種數據類型。通過結合AJAX和JSON，我們可以實現更加高效和靈活的數據交互。本文將重點介紹使用AJAX發送和接收JSON數據的相關知識，并通過具體的例子進行說明。

在使用AJAX發送JSON數據之前，我們首先需要確保頁面上引入了jQuery庫。jQuery是一個流行的JavaScript庫，它簡化了編寫JavaScript代碼的過程，其中包含了用于處理AJAX請求的功能。接下來，我們可以使用jQuery的AJAX方法來發送一個POST請求，并在請求的設置中指定dataType為JSON。

$.ajax({
url: 'example.com/api',
type: 'POST',
dataType: 'json',
data: {
name: 'John',
age: 30
},
success: function(response) {
// 處理返回的JSON數據
}
});

上述代碼中，我們定義了一個AJAX請求的參數對象，并傳入了請求的URL、請求類型、數據類型、要發送的數據以及成功回調函數。在成功回調函數中，我們可以使用response參數來訪問返回的JSON數據。

假設我們需要從服務器端獲取一個學生列表的JSON數據，并在頁面上進行展示。服務器端的數據如下：

[
{
"name": "John",
"age": 18,
"grade": "A"
},
{
"name": "Emma",
"age": 20,
"grade": "B"
},
{
"name": "Michael",
"age": 22,
"grade": "C"
}
]

我們可以通過AJAX請求將上述數據獲取到，并使用jQuery的each方法來遍歷數據并在頁面上展示：

$.ajax({
url: 'example.com/api/students',
type: 'GET',
dataType: 'json',
success: function(response) {
// 遍歷JSON數據
$.each(response, function(index, student) {
// 在頁面上展示學生信息
$('body').append('
Name: ' + student.name + '
');
$('body').append('
Age: ' + student.age + '
');
$('body').append('
Grade: ' + student.grade + '
');
$('body').append('
');
});
}
});

上述代碼中，我們定義了一個AJAX請求，指定了GET方法和JSON數據類型。在成功回調函數中，我們使用each方法來循環遍歷返回的JSON數據，通過append方法將學生信息展示在頁面上，并使用hr標簽進行分隔。

通過以上的實例，我們可以看到使用AJAX發送和接收JSON數據是非常簡單和方便的。它不僅提供了高效的數據交互方式，還能夠實現動態更新頁面的效果。在實際應用中，我們可以根據需要靈活地使用AJAX和JSON來進行數據交互，從而提升用戶體驗和網站的性能。