Ajax和JSON是現代Web開發中非常重要的兩個技術，它們可以實現動態加載數據和在客戶端與服務器之間進行數據交互。其中，Ajax用于異步加載數據，而JSON用于表示和傳輸數據。本文將重點介紹如何使用Ajax發送JSON格式的數據，以及如何將服務器返回的JSON數據與頁面進行交互。

在講解Ajax發送JSON數據之前，我們先來了解一下什么是JSON。JSON，即JavaScript Object Notation，是一種輕量級的數據交換格式。它由鍵值對組成，可以表示復雜的數據結構，比如數組、對象等。JSON數據可以被解析成JavaScript對象，從而在客戶端進行操作。

假設我們正在編寫一個用戶登錄的功能，用戶需要在頁面上輸入用戶名和密碼，然后點擊登錄按鈕。我們可以使用Ajax來發送用戶輸入的數據到服務器端進行驗證。下面是一個使用jQuery庫的示例代碼：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$('#login-button').click(function() {
var username = $('#username').val();
var password = $('#password').val();
var data = {
username: username,
password: password
};
// 發送Ajax請求
$.ajax({
type: 'POST',
url: '/api/login',
data: JSON.stringify(data),
contentType: 'application/json',
success: function(response) {
// 處理服務器返回的JSON數據
if (response.success) {
alert('登錄成功！');
} else {
alert('登錄失敗，請檢查用戶名和密碼！');
}
}
});
});
});
</script>

在上面的例子中，我們首先使用jQuery庫提供的`$(function() { ... })`方法來確保文檔加載完后執行我們的代碼。然后，我們通過`$('#login-button').click(function() { ... })`方法給登錄按鈕添加了點擊事件的處理函數。

在點擊事件處理函數中，我們首先獲取了用戶在頁面上輸入的用戶名和密碼，然后使用JavaScript對象的字面量表示法創建了一個`data`對象，其中包含了用戶名和密碼這兩個鍵值對。

接下來，我們使用了jQuery庫提供的`$.ajax()`函數發送Ajax請求到服務器。其中，`type: 'POST'`表示請求類型為POST，`url: '/api/login'`表示請求的URL地址是`/api/login`，`data: JSON.stringify(data)`表示將`data`對象轉換為JSON字符串并作為請求的數據。最后，`contentType: 'application/json'`表示請求的Content-Type為JSON。

在成功接收到服務器返回的數據后，我們可以在`success`回調函數中處理服務器返回的JSON數據。在本例中，我們簡單地判斷了服務器返回的數據中的`success`屬性是否為`true`，如果是，就彈出一個登錄成功的提示框；否則，就彈出一個登錄失敗的提示框。

通過上面的例子，我們可以看到使用Ajax發送JSON數據非常簡便。我們只需要創建一個包含需要傳遞的數據的JavaScript對象，然后使用`JSON.stringify()`方法將其轉換為JSON字符串并作為請求的數據即可。

在服務器端接收到前端發送的JSON數據后，我們可以使用相應的后端技術（比如PHP、Java、Python等）將其解析成為對象，然后進行相應的處理和驗證。最后，服務器可以返回一個包含業務處理結果的JSON數據，供前端進行展示和交互。

綜上所述，Ajax和JSON的結合為前后端的數據交互提供了強大的工具。無論是在用戶登錄、提交表單、異步加載數據等場景下，我們都可以使用Ajax發送JSON數據進行數據交互，從而實現更豐富和動態的用戶體驗。