Heim > Artikel > Web-Frontend > Ajax-Implementierungscode für dreistufige Verknüpfung
Ajax-Implementierungscode für dreistufige Verknüpfung
- 亚连Original
- 2018-05-22 14:32:401150Durchsuche
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!