Ajax implementiert einen einfachen Dropdown-Optionseffekt

Der folgende Editor bringt Ihnen einen Artikel zur Implementierung eines einfachen Dropdown-Optionseffekts mit Ajax. Der Herausgeber findet es ziemlich gut. Wenn Sie sich für Ajax interessieren, folgen Sie ihm, um einen Blick darauf zu werfen.

Es handelt sich im Grunde um feste Schritte. Hauptsächlich Operationen in JAVASCRIPT und PHP

1. Es gibt nur zwei SELECT-Tags im HTML-Code wie folgt:

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

2. Die Schritte zum Erstellen von Optionen und zum Ausführen asynchroner AJAX-Anfragen in Javascript sind wie folgt:

<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. PHP-Code Dateiname: finaly .php und JS: URL-Docking der xhr.open(method,url)-Methode!

<?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; 
    } 
  } 
?>

Die obige Ajax-Implementierung einfacher Dropdown-Optionseffekte ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben! !

Verwandte Empfehlungen:

Eine kurze Analyse der Prinzipien, Vor- und Nachteile von Ajax

Ajax erkennt die Funktion einer langen Verbindung zwischen Server und Browser

Ajax-Implementierung des flimmerfreien Seitencodes für die geplante Aktualisierung

Das obige ist der detaillierte Inhalt vonAjax implementiert einen einfachen Dropdown-Optionseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!