Ajax 框架級聯菜單的實現方法有哪些？

作者：理工男二號 2023-05-09 07:38:57

jQuery是一種流行的JavaScript庫，它可以幫助我們更容易地編寫Ajax代碼。我們可以使用jQuery的Ajax方法獲取JSON數據并在頁面上更新內容。

Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術。它可以幫助我們實現在不刷新整個頁面的情況下更新部分頁面的內容。在這里，我將介紹使用Ajax實現級聯菜單的幾種方法。

級聯菜單指的是一個或多個菜單的選項根據先前的選項進行更改的過程。例如，如果你選擇了一個國家，那么第二個菜單中顯示的選項就應該是該國家的城市。以下是實現級聯菜單的幾種方法：

使用 jQuery Ajax

jQuery是一種流行的JavaScript庫，它可以幫助我們更容易地編寫Ajax代碼。我們可以使用jQuery的Ajax方法獲取JSON數據并在頁面上更新內容。例如：

HTML：

<select id="country">
  <option value="">請選擇國家</option>
  <option value="cn">中國</option>
  <option value="us">美國</option>
</select>

<select id="city">
  <option value="">請選擇城市</option>
</select>

jQuery：

$(document).ready(function() {
  $("#country").change(function() {
    var country = $(this).val();
    $.ajax({
      url: "get_cities.php",
      type: "POST",
      data: { country: country },
      dataType: "json",
      success: function(data) {
        $("#city").empty();
        $.each(data, function(key, value) {
          $("#city").append("<option value='" + key + "'>" + value + "</option>");
        });
      }
    });
  });
});

上面的代碼中，我們使用了jQuery的$.ajax方法來獲取get_cities.php返回的JSON數據。在成功回調函數中，我們將返回的數據用于更新第二個下拉菜單。

使用原生 JavaScript

我們也可以使用原生JavaScript實現級聯菜單。以下是一個基于XMLHttpRequest對象實現級聯菜單的示例：

HTML：

<select id="country">
  <option value="">請選擇國家</option>
  <option value="cn">中國</option>
  <option value="us">美國</option>
</select>

<select id="city">
  <option value="">請選擇城市</option>
</select>

JavaScript：

function getCities() {
  var xhr = new XMLHttpRequest();
  var country = document.getElementById("country").value;
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      var citySelect = document.getElementById("city");
      citySelect.innerHTML = "<option value=''>請選擇城市</option>";
      for (var key in data) {
        citySelect.innerHTML += "<option value='" + key + "'>" + data[key] + "</option>";
      }
    }
  };
  xhr.open("POST", "get_cities.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("country=" + country);
}

document.getElementById("country").addEventListener("change", getCities);

上面的代碼中，我們創建了一個XMLHttpRequest對象并發送了一個POST請求。在成功回調函數中，我們使用返回的JSON數據來更新第二個下拉菜單的選項。

使用Vue.js

Vue.js是一種流行的JavaScript框架，它可以幫助我們更輕松地創建響應式Web應用程序。以下是使用Vue.js實現級聯菜單的示例：

HTML：

<div id="app">
  <select v-model="selectedCountry">
    <option value="">請選擇國家</option>
    <option value="cn">中國</option>
    <option value="us">美國</option>
  </select>

  <select v-model="selectedCity">
    <option value="">請選擇城市</option>
    <option v-for="(city, key) in cities" :value="key">{{ city }}</option>
  </select>
</div>

Vue.js：

new Vue({
  el: "#app",
  data: {
    selectedCountry: "",
    selectedCity: "",
    cities: {}
  },
  watch: {
    selectedCountry: function(newValue) {
      var vm = this;
      if (newValue) {
        axios.post("get_cities.php", { country: newValue })
          .then(function(response) {
            vm.cities = response.data;
            vm.selectedCity = "";
          })
          .catch(function(error) {
            console.log(error);
          });
      }
    }
  }
});

上面的代碼中，我們使用Vue.js創建了一個新的Vue實例并定義了一些數據和方法。當第一個下拉菜單的值發生變化時，我們使用axios庫發送一個POST請求，并使用返回的JSON數據來更新第二個下拉菜單的選項。

這些都是使用Ajax實現級聯菜單的幾種方法。無論你選擇哪種方法，都需要使用服務器端腳本來處理Ajax請求，并返回JSON數據。

責任編輯：姜華來源：今日頭條

jQuery Ajax代碼