如何在jquery中使用ajax實現(xiàn)一個三級聯(lián)動功能
這期內(nèi)容當中小編將會給大家?guī)碛嘘P如何在jquery中使用ajax實現(xiàn)一個三級聯(lián)動功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)建站堅持“要么做到，要么別承諾”的工作理念，服務領域包括：做網(wǎng)站、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的博白網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
第一種方式：沒有用到封裝，數(shù)據(jù)讀取較慢，可以看看原理，這樣在第二種方式封裝時就容易多了。
代碼如下：
$(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"+lie[1]+"";
}
$("#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"+lie2[1]+"";
}
$("#shi").html(str2);
}
});
})
//輸出區(qū)縣
$("#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"+lie3[1]+"";
}
$("#qu").html(str3);
}
});
})
})
期間出現(xiàn)的問題：每個下拉列表的第一個數(shù)據(jù)輸不出來：是因為每個下拉列表的第一個數(shù)據(jù)的value值都帶有空格！??！所以在輸出data時要去空格?。?！
data返回的值可能帶有空格換行等，所以要用trim()方法去空格?。?！
第二種方式：封裝成插件，以后可以隨時調(diào)用（重要）
（1）主頁面：
//引入jquery包
//引用我們自己封裝的js文件
//id要與封裝的js插件中一致
（2）我們自己封裝的js插件
$(document).ready(function(e){
//扔三個下拉列表到主頁面建的div中
$("#sanji").html("");
//加載省的數(shù)據(jù)
LoadSheng();
//加載市的數(shù)據(jù)
LoadShi();
//加載區(qū)的數(shù)據(jù)
LoadQu();
//給省的下拉列表添加點擊事件，當省變化時，對應的市和區(qū)會發(fā)生變化
$("#sheng").click(function(){
LoadShi();
LoadQu();
})
//給市的下拉列表添加點擊事件，當市變化時，對應的區(qū)發(fā)生變化
$("#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 + "" + lie[1] + "";
}
$("#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 + "" + lie[1] + "";
}
$("#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 + "" + lie[1] + "";
}
$("#qu").html(str);
}
});
} 其次就是處理頁面(兩種方法都用到的)：chuli.php
strquery($sql);
echo $str;
最后就是封裝的類文件：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;
}
}
?>上述就是小編為大家分享的如何在jquery中使用ajax實現(xiàn)一個三級聯(lián)動功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當前名稱：如何在jquery中使用ajax實現(xiàn)一個三級聯(lián)動功能
文章出自：
http://weahome.cn/article/gdcsgg.html
重慶分公司
重慶分公司
