AJAX(Asynchronous JavaScript and XML)是一種用于創(chuàng)建交互式網(wǎng)頁應(yīng)用程序的技術(shù)。它允許在不刷新整個(gè)頁面的情況下向服務(wù)器發(fā)送請(qǐng)求并接收響應(yīng)。GET方法是HTTP協(xié)議中的一種請(qǐng)求方法,它用于向服務(wù)器請(qǐng)求指定的資源。AJAX和GET方法的結(jié)合可以實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)功能,即一個(gè)下拉列表的選擇會(huì)影響另一個(gè)下拉列表的內(nèi)容。
比如,我們來實(shí)現(xiàn)一個(gè)可以選擇城市和該城市的景點(diǎn)的功能。首先,我們需要一個(gè)城市的下拉列表,用戶可以從中選擇一個(gè)城市。當(dāng)用戶選擇了一個(gè)城市后,我們需要根據(jù)這個(gè)選擇來獲取該城市所對(duì)應(yīng)的景點(diǎn)列表,并將結(jié)果顯示在另一個(gè)下拉列表中。
在HTML中,我們可以創(chuàng)建兩個(gè)用于顯示城市和景點(diǎn)的下拉列表:
<select id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> </select> <select id="scenic"> </select>
接下來,我們需要用AJAX來實(shí)現(xiàn)根據(jù)城市獲取景點(diǎn)的功能。在JavaScript中,我們可以通過以下方式來實(shí)現(xiàn):
const citySelect = document.getElementById("city"); const scenicSelect = document.getElementById("scenic"); citySelect.addEventListener("change", function() { const city = citySelect.value; // 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象 const xhr = new XMLHttpRequest(); // 設(shè)置請(qǐng)求方式和URL xhr.open("GET", "/getScenic?city=" + city); // 監(jiān)聽響應(yīng)狀態(tài)變化事件 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); // 清空景點(diǎn)下拉列表 scenicSelect.innerHTML = ""; // 遍歷景點(diǎn)列表,創(chuàng)建option元素并添加到景點(diǎn)下拉列表中 response.forEach(function(scenic) { const option = document.createElement("option"); option.value = scenic; option.textContent = scenic; scenicSelect.appendChild(option); }); } }; // 發(fā)送請(qǐng)求 xhr.send(); });
上述代碼中,我們首先獲取了城市和景點(diǎn)的下拉列表元素。然后,在城市下拉列表的change事件中,我們通過使用XMLHttpRequest對(duì)象來發(fā)送一個(gè)GET請(qǐng)求到服務(wù)器的"/getScenic"路徑,并將城市作為參數(shù)傳遞給服務(wù)器。
當(dāng)接收到來自服務(wù)器的響應(yīng)時(shí),我們首先將響應(yīng)的JSON字符串轉(zhuǎn)換為JavaScript對(duì)象。然后,我們清空景點(diǎn)下拉列表,并遍歷響應(yīng)對(duì)象中的景點(diǎn)列表。對(duì)于每一個(gè)景點(diǎn),我們創(chuàng)建一個(gè)option元素,并將其添加到景點(diǎn)下拉列表中。
通過以上的代碼和實(shí)現(xiàn),當(dāng)用戶在城市下拉列表中選擇一個(gè)城市時(shí),我們會(huì)向服務(wù)器發(fā)送一個(gè)GET請(qǐng)求來獲取該城市的景點(diǎn)列表,并將結(jié)果顯示在景點(diǎn)的下拉列表中,實(shí)現(xiàn)了二級(jí)聯(lián)動(dòng)的功能。