如何在jquery中使用ajax实现一个三级联动功能
这期内容当中小编将会给大家带来有关如何在jquery中使用ajax实现一个三级联动功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的博白网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。
代码如下：
$(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);
}
});
})
//输出区县
$("#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);
}
});
})
})
期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的value值都带有空格！！！所以在输出data时要去空格！！！
data返回的值可能带有空格换行等，所以要用trim()方法去空格！！！
第二种方式：封装成插件，以后可以随时调用（重要）
（1）主页面：
//引入jquery包
//引用我们自己封装的js文件
//id要与封装的js插件中一致
（2）我们自己封装的js插件
$(document).ready(function(e){
//扔三个下拉列表到主页面建的div中
$("#sanji").html("");
//加载省的数据
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 + "" + 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实现一个三级联动功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
分享文章：如何在jquery中使用ajax实现一个三级联动功能
文章来源：
http://chengdu.cdxwcx.cn/article/gdcsgg.html
