在Web開發中，Ajax是一種常用的技術，它可以實現頁面的無刷新更新和異步加載數據。而JSON是一種輕量級的數據交換格式，常用于前后端數據的傳輸和交互。當這兩者結合在一起時，可以實現高效的數據交互和動態頁面的實時更新。

在一個網站中，我們可能需要動態加載一些數據，例如商品信息、用戶評論等，而不需要刷新整個頁面。這時候，我們可以使用Ajax來實現數據的異步加載。在前端頁面中，我們使用JavaScript代碼通過Ajax向后端發送請求，并獲取到數據后，可以用JSON數據格式將數據傳遞給前端頁面進行顯示。

$.ajax({
url: "example.com/api/getProductInfo",
method: "GET",
dataType: "json",
success: function(response) {
// 獲取到后端返回的JSON數據
// 進行數據處理和頁面更新操作
},
error: function(error) {
// 處理錯誤情況
}
});

以上是一個簡單的Ajax請求的示例，我們通過GET方法向"example.com/api/getProductInfo"發送請求，并設置了dataType為"json"，表示我們期望獲取到的數據是JSON格式的。當后端返回數據成功時，我們可以在success回調函數中獲取到response對象，該對象包含了后端返回的JSON數據。

接下來我們可以根據后端返回的JSON數據進行處理，例如更新頁面上的商品信息：

success: function(response) {
// 獲取到后端返回的JSON數據
var productInfo = response.productInfo;
// 更新頁面上的商品信息
$("#productTitle").text(productInfo.title);
$("#productDescription").text(productInfo.description);
// ...
}

在上面的例子中，我們假設后端返回的JSON數據中有一個字段叫做"productInfo"，它包含了商品的標題、描述等信息。我們通過JavaScript代碼將這些信息更新到頁面上。

除了獲取數據外，我們也可以通過Ajax將前端頁面中的數據發送給后端進行處理。例如，在一個用戶評論功能中，用戶在前端輸入評論內容后，點擊提交按鈕，我們可以使用Ajax將評論內容以JSON格式發送給后端進行保存。

var comment = {
content: $("#commentContent").val(),
userId: 123,
// ...
};
$.ajax({
url: "example.com/api/saveComment",
method: "POST",
dataType: "json",
data: JSON.stringify(comment),
contentType: "application/json",
success: function(response) {
// 處理保存評論成功的情況
},
error: function(error) {
// 處理錯誤情況
}
});

在上面的例子中，我們創建了一個包含評論內容和用戶id等字段的comment對象，將其以JSON格式發送給后端。注意在發送請求前，我們使用了JSON.stringify方法將comment對象轉換為JSON字符串，并將contentType設置為"application/json"，告訴后端前端發送的數據是JSON格式的。

通過使用Ajax和JSON，我們可以實現更加靈活和高效的數據交互。無論是獲取數據還是發送數據，都可以通過JSON格式進行傳輸，使前后端之間的交互更加方便和快捷。