Wie Ajax städtische Sekundärverknüpfung realisiert

Dieses Mal werde ich Ihnen zeigen, wie Ajax die Verknüpfung von Städten auf zweiter Ebene realisiert Schauen Sie mal rein. 1, HTML

2,

<select id="province">
  <option>请选择</option>
  <option>山东省</option>
  <option>辽宁省</option>
  <option>吉林省</option>
 </select>
 <select id="city">
  <option>请选择</option>
 </select>

Javascript

3, 06.php

<script>
  /*
   * 需要思考哪些事情?
   * * 在什么时候执行Ajax的异步请求?
   *  * 当用户选择具体的省份信息时
   */
  // 1. 为id为province元素绑定onchange事件
  var provinceEle = document.getElementById("province");
  provinceEle.onchange = function(){
    // 清空
    var city = document.getElementById("city");
    var opts = city.getElementsByTagName("option");
    for(var z=opts.length-1;z>0;z--){
      city.removeChild(opts[z]);
    }
    
    if(provinceEle.value != "请选择"){
      // 2. 执行Ajax异步请求
      var xhr = getXhr();
      xhr.open("post","06.php");
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      xhr.send("province="+provinceEle.value);
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4&&xhr.status==200){
          // 接收服务器端的数据内容
          var data = xhr.responseText;
          // data是字符串,转换为数组
          var cities = data.split(",");
          for(var i=0;i<cities.length;i++){
            var option = document.createElement("option");
            var textNode = document.createTextNode(cities[i]);
            option.appendChild(textNode);
            city.appendChild(option);
          }
        }
      }
    }
    
  };
  // 定义获取ajax核心对象的函数XMLHttpRequest对象的函数
  function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
  }
 </script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

<?php
  // 用于处理客户端请求二级联动的数据
  // 1. 接收客户端发送的省份信息
  $province = $_POST[&#39;province&#39;];
  // 2. 判断当前的省份信息,提供不同的城市信息
  switch ($province){
      case &#39;山东省&#39;:
        echo &#39;青岛市,济南市,威海市,日照市,德州市&#39;;
        break;
      case &#39;辽宁省&#39;:
        echo &#39;沈阳市,大连市,铁岭市,丹东市,锦州市&#39;;
        break;
      case &#39;吉林省&#39;:
        echo &#39;长春市,松原市,吉林市,通化市,四平市&#39;;
        break;
    }
  // 服务器端响应的是字符串
?>

Empfohlene Lektüre:

Mit Blod den Ajax-Fortschrittsbalken herunterladen

Code, der durch mehrere asynchrone Ajax-Anfragen verursacht wird. Anleitung Verschachtelung lösen

Das obige ist der detaillierte Inhalt vonWie Ajax städtische Sekundärverknüpfung realisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!