Ajax三级联动
全国省市县查询
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head> <body>
<h1>区域查询</h1>
<div id="sanji"></div>
</body>
</html>
js代码实现各区市随省的变化而变化
$(document).ready(function(e) {
$("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");//将三个下拉的字符串交给前边的div
tiansheng();//加载省的数据
tianshi();//加载市的数据
tianqu();//加载区 的数据
$("#sheng").change(function(){//变化后执行
tianshi();//重新加载市
tianqu();//重新加载区
})
$("#shi").change(function(){//变化后执行
tianqu();//加载区的数据
})
});
function tiansheng(){
var pcode = "0001"; //找出省的父级代号
$.ajax({
async:false,//同步加载
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");//拆分行
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");//拆分列
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#sheng").html(str);
}
});
}
function tianshi(){
var pcode = $("#sheng").val();//找市的父级代号，省选中项的值
$.ajax({
async:false,//同步加载
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#shi").html(str);
}
});
}
function tianqu(){
var pcode = $("#shi").val();//找区的父级代号，市选中项的值
$.ajax({
url:"states.php",
data:{pcode:pcode},
type:"POST",
dataType:"TEXT",
success: function(data){
var hang = data.split("|");
var str = "";
for(var i=0;i<hang.length;i++){
var lie = hang[i].split("^");
str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>";
}
$("#qu").html(str);
}
});
}
处理页面
<?php
$pcode = $_POST["pcode"];
require "DBDA.class.php";
$db = new DBDA();
$sql = "select * from chinastates where parentareacode='{$pcode}'";
echo $db->strquery($sql);
DBDA封装功能
<?php
class DBDA{
public $host="localhost"; //服务器地址
public $uid="root"; //用户名
public $pwd="123"; //密码
public $dbname="crud"; //数据库名称
public function query($sql,$type=0){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type){
return $result;
}else{
return $result->fetch_all();
}
}
public function strquery($sql,$type=0){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type){
return $result;
}else{
$arr = $result->fetch_all();
$str ="";
foreach($arr as $v){
$str .= implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
}
}
Ajax三级联动的更多相关文章
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- 使用 AJAX + 三级联动 实现分类出全国各地的省，市，区
使用AJAX + 三级联动 实现分类出全国各地的省,市,区 也可以将下面的显示页面所写的 function循环,封装成js文件,就是在写代码软件里创建一个js文件,就和创建一个HTML或php文件一 ...
- AJAX 三级联动
新的封装类 <?php class DBDA { public $host="localhost";//服务器地址 public $uid="root"; ...
- ajax三级联动下拉菜单
ajax写三级联动,先写一个文件类吧,以后用的时候直接调用即可: 来找一张表: 实现: 中国地域的三级联动:省.市.区: 图: 说一下思路: (1)当用户选择省份的时候触发事件,把当前的省份的id通过 ...
- 0509 关于Ajax + 三级联动示例
关于Ajax 1.干什么的? ajax负责抓取用户名信息,传递给服务器进行校验: 2.属性: onreadystatechange:事件,该事件可以感知ajax状态(readyState)的变化.aj ...
- [Ajax三级联动 无刷新]
三级联动 的效果图 html页面: <body> <label class="fl">区域:</label> <select class= ...
- 2019.03.25 Ajax三级联动
所谓三级联动就是,一层接着一层,根据上一层的选择给出这一层的结果 如选择市之后,会给出相应的区,然后到相应的县这就是联动 配置视图 from django.core import serialize ...
- ajax 三级联动商品分类（转载）
转载 自 jines http://www.cnblogs.com/lijinblogs/p/5759399.html 思路分析:效果:当页面加载时,利用ajax异步向后台请求数据,加载一 ...
- 原生javascript AJAX 三级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- jdbc实现分页，需要前端传当前页码
1.封装一个公共实体类用于返回:实体数据,当前页,总页数,总条数,每页多少条 public class PageInfo<T> { //一页显示的记录数 private int numPe ...
- js日常
JS中变量后面有个问号是什么意思? return n?n*arguments.callee(n-1):1;JS中变量后面有个问号是什么意思?然后 后面一个:1又是什么意思? 问号与冒号要连在一 ...
- 2018/03/08 每日一个Linux命令 之 chattr/lsattr
每日一个Linux命令 2018-03-08 Linux 命令 chattr/lsattr chattr [-参数] [+/-属性] [文件或者目录] 经过今天没有对铃,粥熬糊了,我就知道...... ...
- 产品列表中使用v-lazyload插件懒加载img图片，但是当产品列表重新排序（人气，销量，价格...），产品info信息改变，但是 img 图片没有发生变化；
1.控制台查看 DOM 结构,发现 DOM 绑定的图片链接也没有发生变化: 2.查阅资料找到解决方法,只需要在 img 标签中增加 :key='imgUrl',即可实现 img 图片随数据排序的改变动 ...
- oracle闪回的使用
1.闪回查询(原理:依赖于UNDO表空间)查询当前SCN号select current_scn from v$database;误删数据以后select * from table_name as of ...
- nessus的安装
nessus安装 .下载地址 http://www.tenable.com/products/nessus/select-your-operating-system .获取注册码 www.nessus ...
- MySQL数据库的权限问题操作及基本增删改查操作
前面我们讲了mysql的基本内容,现在我们详细的了解一下mysql中的具体操作. what's the SQl SQL(Structured Query Language 即结构化查询语言) SQL语 ...
- SQL存储过程分页
CREATE PROC ZDY_FY(@Pages INT, @pageRow INT) --@Pages第几页 @pageRow每页显示几行 AS BEGIN DECLARE @starNum IN ...
- Linux系统下我的/etc/sysconfig/路径下无iptables文件
转载于:https://blog.csdn.net/zzm8421/article/details/78083582 虚拟机新装了一个CentOs7,然后做防火墙配置的时候找不到iptables文件, ...
- [django]模板中自定义变量&django模板中的变量
django自定义模板变量 context_processors.py def mysetings(request): return { 'NAME': 'maotai' } settings.py ...