AJAX (Asynchronous JavaScript and XML) 是一種在不重新加載整個頁面的情況下，通過在后臺與服務器進行小規模數據交換的技術。在web開發中，我們經常遇到需要提交JSON數據的情況。JSON (JavaScript Object Notation) 是一種輕量級的數據交換格式，常用于前后端數據的傳輸。

假設我們正在開發一個留言板應用，用戶在頁面上輸入留言內容，點擊提交按鈕后，我們希望能將留言內容以JSON格式提交到服務器并進行處理。這時，我們可以使用AJAX來實現這個功能。

// 獲取用戶輸入的留言內容
var message = document.getElementById('message').value;
// 創建一個XMLHttpRequest對象，用于發送請求
var xhr = new XMLHttpRequest();
// 設置請求類型和URL
xhr.open('POST', '/api/message', true);
// 設置請求頭，告訴服務器請求的內容為JSON格式
xhr.setRequestHeader('Content-Type', 'application/json');
// 創建一個JSON對象，包含留言內容
var data = { message: message };
// 將JSON對象轉換為字符串
var jsonData = JSON.stringify(data);
// 發送請求
xhr.send(jsonData);

在上述代碼中，我們首先通過getElementById方法獲取用戶輸入的留言內容，然后創建了一個XMLHttpRequest對象，該對象用于發送請求。接下來，我們使用open方法設置請求的類型為POST，并指定了請求的URL。通過setRequestHeader方法，我們告訴服務器請求的內容為JSON格式。然后，我們創建了一個JSON對象，將用戶輸入的留言內容作為一個屬性賦值給該對象。最后，我們通過JSON.stringify方法將JSON對象轉換為字符串，并通過send方法將字符串發送給服務器。

當服務器收到請求后，可以通過后端代碼進行處理。假設我們后端使用Python來處理請求，我們可以使用Flask框架來編寫后端代碼。

from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/api/message', methods=['POST'])
def submit_message():
data = request.get_json()
message = data.get('message')
# 處理留言內容
response = {'success': True}
return jsonify(response)
if __name__ == '__main__':
app.run()

在上述代碼中，我們首先導入了flask模塊并創建了一個Flask對象。然后，我們使用route裝飾器來定義一個路徑為/api/message的路由，指定請求方法為POST。在submit_message函數中，我們通過request.get_json方法獲取到前端發送的JSON數據，并讀取了其中的留言內容。接下來，我們可以對留言內容進行處理。在這個例子中，我們簡單地將處理結果設置為一個success屬性為True的JSON對象，并通過jsonify方法將其轉換為JSON格式的字符串作為響應返回給前端。

通過以上的代碼示例，我們可以看到通過AJAX提交JSON數據非常簡單。前端代碼負責將用戶輸入的數據轉換為JSON格式并發送給后端，后端代碼負責接收JSON數據并進行處理。這種方式可以提供更好的用戶體驗，使得頁面不需要重新加載，同時也方便了前后端數據的交互。