Ajax+Servlet zur Implementierung einer aktualisierungsfreien Dropdown-Verknüpfung (Code im Anhang)

Dieses Mal bringe ich Ihnen Ajax+Servlet (mit Code), um eine Dropdown-Verknüpfung ohne Aktualisierung zu erreichen Das Folgende ist ein praktischer Fall. Man kann sagen, dass die Dropdown-Verknüpfungsfunktion sehr häufig verwendet wird, beispielsweise bei der Auswahl von Provinz-, Stadt- und anderen Informationen oder bei der Auswahl von Hauptkategorien oder Unterkategorien. Kurz gesagt, die Dropdown-Verknüpfung wird sehr häufig verwendet. Heute werde ich Ihnen eine einfache zweistufige Dropdown-Verknüpfungsfunktion vorstellen.

Dropdown-Feld für Hauptkategorien: Wenn die Seite geladen wird, werden die Dropdown-Optionen der Hauptkategorien initialisiert und die Daten werden über den Hintergrundcode aus der Datenbank abgerufen (natürlich konstante Inhalte wie z B. Provinzen und Städten, können Werte direkt zugewiesen werden) und dann in Dropdown-Optionen geladen werden.

Dropdown-Feld für kleine Kategorien: Die Dropdown-Option für kleine Kategorien besteht darin, den Inhalt der ausgewählten Hauptkategorie asynchron über Ajax an ein Servlet zu senden und dann den entsprechenden Inhalt der kleinen Kategorie zurückzugeben. und laden Sie es schließlich in die Dropdown-Option für kleine Kategorien in der Mitte.

<select name="region" class="select1" id="BigClass" onchange="selectProv(this)"> 
  <option value="0">--全部--</option> 
  <% 
    Map map = ClientManager.getInstance().getRegionList(); 
    for (Iterator iter=map.entrySet().iterator(); iter.hasNext();) { 
      Map.Entry entry = (Map.Entry)iter.next();                     
  %> 
      <option value="<%=entry.getKey() %>"><%=entry.getValue() %></option> 
  <% 
    } 
  %>   
</select>

Rufen Sie den JS-Code des kleinen Kategorie-Dropdown-Felds ab und laden Sie ihn:

<select name="province" class="select1" id="SmallClass"> 
  <option value="0">--全部--</option> 
</select>

Ich werde hier nicht näher darauf eingehen, wie man Daten aus der Datenbank erhält. Es ist nur eine gewöhnliche Abfrage, die relativ einfach ist. Die Verknüpfung auf zweiter Ebene, die Verknüpfung auf dritter Ebene und die Verknüpfung auf mehreren Ebenen sind alle gleich, d Inhalte usw. Sobald Sie die Verknüpfung der zweiten Ebene beherrschen, wird alles andere zur Selbstverständlichkeit, nämlich das Hinzufügen einiger weiterer Dropdown-Boxen.

<script type="text/javascript"> 
  function selectProv(field) { 
    var xmlHttp = null; 
    //表示当前浏览器不是ie,如ns,firefox 
    if(window.XMLHttpRequest) { 
      xmlHttp = new XMLHttpRequest(); 
    } else if(window.ActiveXObject) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
      var url = "${pageContext.request.contextPath}/servlet/SelectProvServlet?regionId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    xmlHttp.onreadystatechange=function() { 
      //Ajax引擎状态为成功 
      if(xmlHttp.readyState == 4) { 
        //HTTP协议状态为成功 
        if(xmlHttp.status == 200) { 
          var doc = xmlHttp.responseXML; 
          var items = doc.getElementsByTagName("item"); 
          //取得小类下拉列表 
          var provSelect = document.getElementById("SmallClass"); 
          //清除小类下拉列表中的值 
          provSelect.options.length = 0; 
          var o = new Option("--全部--", 0); 
          provSelect.add(o); 
          for (var i=0; i<items.length; i++) { 
            var id =items[i].childNodes[0].firstChild.nodeValue; 
            var name = items[i].childNodes[1].firstChild.nodeValue; 
            var o = new Option(name, id); 
            provSelect.add(o); 
          } 
        }else { 
          alert("请求失败，错误码=" + xmlHttp.status); 
        } 
      } 
    }; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } 
</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.

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Empfangen von JOSN-Daten mit JOSNP in Ajax

Was ist ein eleganter Lösung für Front-End-Ajax-Anfrage Realize

Das obige ist der detaillierte Inhalt vonAjax+Servlet zur Implementierung einer aktualisierungsfreien Dropdown-Verknüpfung (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!