AJAX（Asynchronous JavaScript and XML）技術使得我們能夠通過后臺發起異步請求，從而實現無刷新更新頁面內容的功能。而在使用 AJAX 進行數據交互時，最常用的數據格式之一就是 JSON（JavaScript Object Notation）。JSON 是一種輕量級的數據交換格式，易于閱讀和編寫，由鍵值對組成。本文將介紹如何使用 AJAX 提交表單數據并返回 JSON 數據，及其在實際項目中的應用。

假設我們有一個簡單的登錄表單，用戶需要輸入用戶名和密碼。在用戶填寫完表單并點擊提交按鈕后，我們將使用 AJAX 技術將表單數據提交給后臺進行驗證，如果驗證成功，后臺將返回一個 JSON 對象，表示登錄結果。接下來，我們將根據該 JSON 對象的值來更新頁面上的相關內容。

HTML 代碼：
<form id="loginForm" action="" method="post">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼：</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登錄">
</form>
<div id="result"></div>
JavaScript 代碼：
// 使用 jQuery 的 AJAX 方法提交表單數據
$('#loginForm').submit(function(event) {
event.preventDefault(); // 阻止默認提交行為
var username = $('#username').val();
var password = $('#password').val();
// 構造要發送的 JSON 對象
var dataToSend = {
username: username,
password: password
};
// 發送 AJAX 請求
$.ajax({
type: 'POST',
url: 'login.php',
data: dataToSend,
dataType: 'json',
success: function(data) {
// 根據返回的 JSON 對象更新頁面上的相關內容
if (data.success) {
$('#result').text('登錄成功');
} else {
$('#result').text('登錄失敗，請檢查用戶名和密碼');
}
},
error: function() {
$('#result').text('請求出錯');
}
});
});

在上面的代碼中，我們使用 jQuery 的 AJAX 方法提交表單數據。其中，我們通過阻止默認的表單提交行為（使用 event.preventDefault()）來實現無刷新提交。然后，我們獲取表單中輸入的用戶名和密碼，并構造一個 JSON 對象將其作為數據發送給后臺的 login.php 文件。

在后臺的 login.php 文件中，我們接收到前端發送的 JSON 數據，然后進行用戶名和密碼的驗證。如果驗證成功，我們將構造一個 JSON 對象，其中的 success 鍵的值為 true，表示登錄成功；如果驗證失敗，則 success 鍵的值為 false，表示登錄失敗。最后，將該 JSON 對象返回給前端。

前端在收到后臺返回的 JSON 對象后，會觸發 success 回調函數。我們根據返回的 JSON 對象的 success 值來更新頁面上的相關內容。例如，如果 success 為 true，表示登錄成功，我們將在 id 為 result 的 div 元素中顯示"登錄成功"；如果 success 為 false，表示登錄失敗，我們將顯示"登錄失敗，請檢查用戶名和密碼"。如果 AJAX 請求出錯，將觸發 error 回調函數，我們在該回調函數中將"請求出錯"顯示在頁面上。

上述示例只是一個簡單的登錄表單，實際中我們可以根據需求進行復雜的表單數據提交和返回的處理。通過使用 AJAX 和 JSON 技術，我們可以實現在用戶與后臺進行交互時，無刷新地更新頁面內容，提高用戶體驗。

總結起來，我們可以利用 AJAX 提交表單數據并返回 JSON 數據的方式，實現無刷新更新頁面內容的功能。通過構造要發送的 JSON 對象并使用 AJAX 方法進行提交，我們可以在前端根據返回的 JSON 對象的值來更新頁面上的相關內容。這種方式在實際項目中廣泛應用，提高了用戶體驗和頁面性能。