Comment Ajax réalise le lien secondaire urbain

Cette fois, je vais vous montrer comment Ajax réalise la liaison de deuxième niveau des villes. Quelles sont les précautions pour qu'Ajax réalise la liaison de deuxième niveau des villes. jetez un oeil.

1, html

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

2, javascript

<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>

3, 06.php

<?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;
    }
  // 服务器端响应的是字符串
?>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Utiliser Blod pour télécharger la barre de progression ajax

Code provoqué par plusieurs requêtes Ajax asynchrones Comment faire résoudre l'imbrication

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!