ajax三级联动实现代码
更新时间：2017年05月23日 09:41:29 作者：ChrissZhao
这篇文章主要为大家详细介绍了ajax三级联动的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了ajax三级联动展示的具体代码，供大家参考，具体内容如下
1. test.php
<script src="../jquery-1.11.2.min.js"></script> <script src="sanji.js"></script> <title>无标题文档</title> </head> <body> <h1>三级联动</h1> <div id="sanji"></div> </body> </html>
2. sanji.js
// JavaScript Document
$(document).ready(function(e) {
//找到ID=SANJI的DIV，造三个下拉扔进去
$("#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);
}
});
}
3. chuli.php
<?php
//给一个父级代号，返回该父级代号下所有的子地区
require "DBDA.class.php";
$db=new DBDA();
$pcode=$_POST["pcode"];
$sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";
echo $db->StrQuery($sql);
引用的封装类里面返回字符串的方法
<?php
class DBDA
{
public $host = "localhost";
public $uid = "root";
public $pwd = "123";
public $dbname = "test_123";
//执行SQL语句返回相应的结果
//$sql 要执行的SQL语句
//$type 代表SQL语句的类型，0代表增删改，1代表查询
function query($sql,$type=0)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type)
{
//如果是查询，显示数据
return $result->fetch_all();
}
else
{
//如果是增删改，返回true或者false
return $result;
}
}
//返回字符串的方法
public function strquery($sql,$type=1)
{
$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;
}
//返回JSON
function JSONQuery($sql,$type=1)
{
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$r = $db->query($sql);
if($type==1)
{
return json_encode($r->fetch_all(MYSQLI_ASSOC));
}
else
{
return $r;
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要教大家简单实现ajax三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
想必大家对ajax调用有所熟悉，下面为大家介绍下iframe式ajax调用,需要的朋友可以参考下2014-02-02
使用jQuery的getJSON从后台定时获取数据并刷新界面，在IE9下却无法刷新数据，原因就是缓存的问题，下面是解决方法2014-09-09
今天被问到用没用过ajax axios,我回答经常用axios,但ajax用的比较少,下面这篇文章主要给大家介绍了关于ajax、axios和fetch之间优缺点重点对比总结的相关资料,需要的朋友可以参考下2022-12-12
下面小编就为大家带来一篇完美解决ajax访问遇到Session失效的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
在AJAX中，最常用的就是JSON，XML因为比较冗杂所以用的比较少。所以我们先来说基于JSON的数据交换。最后我们还会提到在数据交换中出现乱码的形式2022-08-08
这篇文章主要介绍了利用Ajax实现智能回答的机器人,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
应用程序通过XMLHttpRequest对象以后台的方式从服务器获取数据，通过CSS和DOM改变界面的外观，感兴趣的朋友可以了解下本文2014-01-01
本文给大家介绍ajax的三种实现及json解析的相关资料，对本文感兴趣的朋友参考下2015-12-12
本文是小编日常整理些有关jquery ajax()参数详解，由于jquery ajax方法参数比较多，靠大脑记住有点犯难，下面小编把内容整理分享到脚本之家网站，供大家参考2015-10-10
最新评论