Heim >Web-Frontend >js-Tutorial >Ajax-Implementierungscode für dreistufige Verknüpfung
In diesem Artikel wird hauptsächlich der Implementierungscode der Ajax-Drei-Ebenen-Verknüpfung im Detail vorgestellt, der einen gewissen Referenzwert hat.
Das Beispiel in diesem Artikel teilt die Ajax-Drei-Ebenen-Verknüpfung mit allen Verknüpfungscode. Der spezifische Code für die Verknüpfungsanzeige ist wie folgt:
rrree
2. sanji.js<script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> <title>无标题文档</title> </head> <body> <h1>三级联动</h1> <p id="sanji"></p> </body> </html>3.chuli.php
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的p,造三个下拉扔进去 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //加载省的数据 LoadSheng(); //加载市的数据 LoadShi(); //加载区的数据 LoadQu(); //给省的下拉加点击事件 $("#sheng").click(function(){ //重新加载市 LoadShi(); //重新加载区 LoadQu(); }) //给市的下拉加点击事件 $("#shi").click(function(){ //重新加载区 LoadQu(); }) }); //加载省份的方法 function LoadSheng() { //省的父级代号 var pcode = "0001"; $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); } //加载市的方法 function LoadShi() { //找市的父级代号 var pcode = $("#sheng").val(); $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } //加载区的方法 function LoadQu() { //找区的父级代号 var pcode = $("#shi").val(); $.ajax({ url:"chuli.php", data:{pcode:pcode}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.trim().split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); }Die Methode zum Zurückgeben einer Zeichenfolge in der referenzierten Kapselungsklasse
<?php //给一个父级代号,返回该父级代号下所有的子地区 require "DBDA.class.php"; $db=new DBDA(); $pcode=$_POST["pcode"]; $sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'"; echo $db->StrQuery($sql);Das Obige ist das, was ich für alle zusammengestellt habe in Zukunft für alle hilfreich sein. Verwandte Artikel:
Ajax implementiert die Funktion zum Laden von Daten
Verwendung von ajax_Examples, Ajax-Datenverarbeitung
React+ajax+java implementiert die Funktion zum Hochladen von Bildern und deren Vorschau (grafisches Tutorial)
Das obige ist der detaillierte Inhalt vonAjax-Implementierungscode für dreistufige Verknüpfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!