Heim > Artikel > Web-Frontend > Jquery und Ajax realisieren die dreistufige Verknüpfungskapselung und Nichtkapselung von Provinzen und Gemeinden
Jquery und Ajax realisieren die dreistufige Verknüpfungskapselung und Nichtkapselung von Provinzen und Gemeinden
- 小云云Original
- 2018-01-12 09:26:302159Durchsuche
In diesem Artikel wird hauptsächlich der relevante Code von jquery + Ajax zur Realisierung der dreistufigen Verknüpfung von Provinzen und Gemeinden vorgestellt, einschließlich zweier Methoden zur Kapselung und Nichtkapselung, die einen gewissen Referenzwert haben . Ich hoffe, ich kann allen helfen.
Um den unten gezeigten Effekt zu erzielen,
1. Um Ihre Ideen zu klären:
Machen Sie zunächst drei Tropfen -down-Menüs - ---Erhalten Sie den Inhalt der zweiten Dropdown-Liste basierend auf dem Wert des ersten Dropdown-Menüs. Das Gleiche gilt für die dritte Dropdown-Liste.
2. Verwendete Datenbanktabelle: Chinastates-Tabelle
Regel: Fragen Sie die Provinzebene (z. B. Peking) basierend auf der Vorwahl der nationalen Ebene (China) ab ); Fragen Sie die Gemeindeebene (z. B. die Gemeinde Peking) basierend auf der Provinzvorwahl ab; fragen Sie die Bezirksebene (z. B. den Bezirk Dongcheng) basierend auf der Gemeindevorwahl ab
Die erste Methode: verwendet keine Kapselung, das Lesen der Daten ist langsam, Sie können sich das Prinzip ansehen, das die Kapselung auf die zweite Art und Weise viel einfacher macht.
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.11.2.min.js"></script>
</head>
<body>
<select id="sheng"></select>
<select id="shi"></select>
<select id="qu"></select>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e){
//输出省
var code = "0001";
$.ajax({
async:false,
//取消异步
url:"chuli.php",
data:{code:code},
type:"POST",
dataType:"TEXT",
success:function(data){
var hang = data.trim().split("|"); //trim()去空格
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);
}
});
//输出市
$("#sheng").click(function(){
var code2=$("#sheng").val();
$.ajax({
async:false,
url:"chuli.php",
data:{code:code2},
type:"POST",
dataType:"TEXT",
success:function(data2){
var hang2 = data2.trim().split("|");
var str2 ="";
for(var i=0;i<hang2.length;i++)
{
var lie2=hang2[i].split("^");
str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>";
}
$("#shi").html(str2);
}
});
})
//输出区县
$("#shi").click(function(){
var code3=$("#shi").val();
$.ajax({
async:false,
url:"chuli.php",
data:{code:code3},
type:"POST",
dataType:"TEXT",
success:function(data3){
var hang3 = data3.split("|");
var str3 ="";
for(var i=0;i<hang3.length;i++)
{
var lie3=hang3[i].split("^");
str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>";
}
$("#qu").html(str3);
}
});
})
})
</script> Während des Zeitraums aufgetretene Probleme: Die ersten Daten jeder Dropdown-Liste können nicht ausgegeben werden: weil Der Wert der ersten Daten in jeder Dropdown-Liste enthält Leerzeichen! ! ! Es gibt also keine Leerzeichen bei der Datenausgabe! ! !
Der von data zurückgegebene Wert kann Leerzeichen, Zeilenumbrüche usw. enthalten. Verwenden Sie daher die Methode trim(), um Leerzeichen zu entfernen! ! !
Zweite Methode: Eingekapselt in ein Plug-In, das jederzeit in der Zukunft aufgerufen werden kann (wichtig)
(1) Hauptseite:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title><br>//引入jquery包 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件 <script src="sanji.js"></script> </head> <body><br>//id要与封装的js插件中一致 <p id="sanji"></p> </body> </html>
(2) Unser eigenes gekapseltes js-Plug-in
$(document).ready(function(e){
//扔三个下拉列表到主页面建的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: { code: 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: { code: 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: { code: 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);
}
});
} Der zweite Schritt ist um die Seite zu verarbeiten (beide Methoden werden verwendet): chuli.php
<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode='{$code}'";
$str=$db->strquery($sql);
echo $str;Das letzte ist die gekapselte Klassendatei: DB.class.php
function strquery($sql)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db ->query($sql);
$arr =$result->fetch_all();
$str="";
foreach($arr as $v)
{
$str=$str.implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
}
?>Verwandte Empfehlungen:
Jquery, Ajax, XML zur Realisierung des dreistufigen Verknüpfungsmenüeffekts
Ajax-Methode zur Implementierung der dreistufigen Verknüpfung
Das obige ist der detaillierte Inhalt vonJquery und Ajax realisieren die dreistufige Verknüpfungskapselung und Nichtkapselung von Provinzen und Gemeinden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!