AJAX和JSON是前端開發中常用的技術，它們可以讓網頁實現異步加載數據并動態更新頁面內容。在實際應用中，經常需要通過AJAX向服務器發送參數，并使用JSON格式接收響應數據。本文將通過一個實例來演示使用AJAX和JSON傳參的過程，并詳細解釋代碼背后的邏輯。
假設我們正在開發一個電子商務網站，我們需要根據用戶輸入的關鍵詞動態搜索商品信息并展示在頁面上。為了實現這個功能，我們需要使用AJAX發送關鍵詞參數給服務器，并使用JSON格式接收服務器返回的商品信息。以下是示例代碼：
// HTML代碼
<body>
<input type="text" id="keyword" placeholder="請輸入關鍵詞">
<button onclick="search()">搜索</button>
<div id="result"></div>
</body>
// JavaScript代碼
<script>
function search() {
var keyword = document.getElementById("keyword").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
displayResult(data);
}
};
xmlhttp.open("GET", "search.php?keyword=" + keyword, true);
xmlhttp.send();
}
function displayResult(data) {
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
for (var i = 0; i< data.length; i++) {
var productDiv = document.createElement("div");
var productName = document.createElement("h3");
var productPrice = document.createElement("p");
productName.textContent = data[i].name;
productPrice.textContent = "價格：" + data[i].price;
productDiv.appendChild(productName);
productDiv.appendChild(productPrice);
resultDiv.appendChild(productDiv);
}
}
</script>在該實例中，當用戶點擊搜索按鈕時，JS函數search()會被觸發。該函數首先從頁面中獲取用戶輸入的關鍵詞，并創建XMLHttpRequest對象。然后，我們定義一個回調函數來處理服務器響應的數據。當AJAX請求狀態為4（即已完成）且服務器響應狀態為200（即成功）時，我們使用JSON.parse()方法將服務器響應的文本數據轉為JavaScript對象，并調用displayResult()函數展示搜索結果。
接下來，我們在search()函數中使用open()方法打開一個GET請求，URL參數中包含了用戶輸入的關鍵詞。然后，我們使用send()方法發送請求。服務器接收到該請求后，進一步處理關鍵詞參數，查詢相關商品信息，并將結果以JSON格式返回給前端。
最后，我們在displayResult()函數中循環遍歷服務器返回的商品信息，并將每個商品的名稱和價格動態創建為HTML元素，通過appendChild()方法將它們添加到頁面中。
通過這個實例，我們可以看到使用AJAX和JSON傳參的具體過程。通過AJAX發送參數，我們可以實現與服務器的數據交互。使用JSON格式接收響應數據，我們可以方便地處理和展示返回的信息。這種方式不僅可以用于搜索功能，還可以應用于其他涉及到參數傳遞和數據交互的前端開發場景。