Maison > interface Web > js tutoriel > Comment Ajax réalise le lien secondaire urbain

Comment Ajax réalise le lien secondaire urbain

php中世界最好的语言
Libérer: 2018-04-02 14:21:00
original
1843 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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;
    }
  // 服务器端响应的是字符串
?>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal