返回
建站知识
Ajax中option什么意思
2024-12-26 18:19  点击:0
Javascript 代码如下：
var keywordInput = document.getElementById('keyword');var categorySelect = document.getElementById('category');keywordInput.addEventListener('input', function() {var keyword = keywordInput.value;// 使用 ajax 技术向后端请求与关键字相关的类别选项var request = new XMLHttpRequest();request.open('GET', '/get-categories?keyword=' + keyword, true);request.send();request.onreadystatechange = function() {if (request.readyState === 4 && request.status === 200) {var categories = JSON.parse(request.responseText);// 清空旧的选项categorySelect.innerHTML = '';// 动态加载新的选项for (var i = 0; i< categories.length; i++) {var option = document.createElement('option');option.value = categories[i].value;option.textContent = categories[i].label;categorySelect.appendChild(option);}}}});
在上面的例子中，当用户在搜索框中输入关键字时，会触发 'input' 事件。我们使用 ajax 技术向后端发送一个 GET 请求，请求关键字相关的类别选项。当请求成功返回后，我们通过清空下拉菜单中的旧选项，并使用 Javascript 动态创建和添加新选项。例子二：根据用户选项动态更新其他内容接上个例子，当用户在下拉菜单中选择一个类别时，我们希望动态更新页面中的其他内容，例如显示类别下所有的商品。HTML 代码如下：
Javascript 代码如下：
var categorySelect = document.getElementById('category');var productsDiv = document.getElementById('products');categorySelect.addEventListener('change', function() {var selectedCategory = categorySelect.value;// 使用 ajax 技术向后端请求选定类别下的商品var request = new XMLHttpRequest();request.open('GET', '/get-products?category=' + selectedCategory, true);request.send();request.onreadystatechange = function() {if (request.readyState === 4 && request.status === 200) {var products = JSON.parse(request.responseText);// 清空旧的内容productsDiv.innerHTML = '';// 动态更新其他内容for (var i = 0; i< products.length; i++) {var productDiv = document.createElement('div');productDiv.textContent = products[i].name;productsDiv.appendChild(productDiv);}}}});
在上面的例子中，当用户在下拉菜单中选择一个类别时，会触发 'change' 事件。我们使用 ajax 技术向后端发送一个 GET 请求，请求选定类别下的商品。当请求成功返回后，我们通过清空显示商品的元素，并使用 Javascript 动态创建和添加新的商品内容。通过这两个例子，我们可以看到在 ajax 编程中，