Ajax implémente un simple effet d'option déroulante

L'éditeur suivant vous proposera un article pour implémenter un simple effet d'option déroulante en utilisant Ajax. L'éditeur pense que c'est plutôt bien. Maintenant, je partage le code source ajax avec tout le monde. Si vous êtes intéressé par ajax, suivez l'éditeur pour y jeter un œil

Ce sont essentiellement des étapes fixes ! Principalement des opérations en JAVASCRIPT et PHP

1. Il n'y a que deux balises SELECT dans le code HTML comme suit :

<select id="province">
  <option>请选择</option>
 </select>
 <select id="city">
  <option>请选择</option>
 </select>

2. Les étapes pour créer des options et exécuter des requêtes asynchrones AJAX en Javascript sont les suivantes

<script> 
  var xhr = getXhr(); 
  // 第一次执行Ajax异步请求 - 省份 
  window.onload = function(){ 
    xhr.open("get","finaly.php?state=1"); 
    xhr.send(null); 
    xhr.onreadystatechange = function(){ 
    if(xhr.readyState==4&&xhr.status==200){ 
        var data = xhr.responseText; 
        // 将字符串转换为数组 
        var provinces = data.split(","); 
        // 遍历数组 
        for(var i=0;i<provinces.length;i++){ 
          // 创建option元素添加到id为province元素上 
          var option = document.createElement("option"); 
          var text = document.createTextNode(provinces[i]); 
          option.appendChild(text); 
          var province = document.getElementById("province"); 
          province.appendChild(option); 
        } 
      }  
    } 
  } 
  // 第二次执行Ajax异步请求 - 城市 
  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(province.value != "请选择"){ 
      xhr.open("post","finaly.php"); 
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
      xhr.send("province="+province.value); 
      xhr.onreadystatechange = function(){ 
        if(xhr.readyState==4&&xhr.status==200){ 
          var data = xhr.responseText; 
          var cities = data.split(","); 
          for(var i=0;i<cities.length;i++){ 
            var option = document.createElement("option"); 
            var text = document.createTextNode(cities[i]); 
            option.appendChild(text); 
             
            city.appendChild(option); 
          } 
        } 
      } 
    } 
 
  } 
 
  function getXhr(){ 
    var xhr = null; 
    if(window.XMLHttpRequest){ 
      xhr = new XMLHttpRequest(); 
    }else{ 
      xhr = new ActiveXObject("Microsoft.XMLHttp"); 
    } 
    return xhr; 
  } 
 </script>

3

Le code PHP est le suivant : nom du fichier : enfin .php et JS : url docking de la méthode xhr.open(method,url) !

<?php 
  // 接收客户端发送的请求数据 - state 
  $state = $_REQUEST[&#39;state&#39;]; 
  // 判断$state的值 
  if($state == 1){// 获取省份 
    echo &#39;山东省,辽宁省,吉林省&#39;; 
  }else{// 获取城市 
    $province = $_POST[&#39;province&#39;]; 
    switch ($province){ 
      case &#39;山东省&#39;: 
        echo &#39;青岛市,济南市,威海市,日照市,德州市&#39;; 
        break; 
      case &#39;辽宁省&#39;: 
        echo &#39;沈阳市,大连市,铁岭市,丹东市,锦州市&#39;; 
        break; 
      case &#39;吉林省&#39;: 
        echo &#39;长春市,松原市,吉林市,通化市,四平市&#39;; 
        break; 
    } 
  } 
?>

L'implémentation Ajax ci-dessus des effets d'options déroulants simples est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence ! !

Recommandations associées :

Une brève analyse des principes, avantages et inconvénients d'Ajax

ajax réalise la fonction de connexion longue entre serveur et navigateur

Implémentation Ajax du code de page d'actualisation programmée sans scintillement

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!