第117天：Ajax实现省市区三级联动
Ajax实现省市区三级联动
思路：
（1）首先获取省份信息
（2）发起Ajax请求，注意dataType中的T大写
（3）封装回调函数，回调函数success中用$.each循环每一条数据，动态创建option，并将数据添加到option中
（4）定义点击事件，注意点击省调用的是city函数，点击市调用的是area函数
（5）注意获取市信息用的是省编码（pCode），获取区用的是市编码（cCode）。
1、HTML代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<style type="text/css">
#showInfo{
position: absolute;
width: 600px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
background: lightgreen;
left: 50%;
margin-left: -300px;
}
#showInfo div{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 160px;
}
#showInfo div select{
width: 160px;
}
</style>
<script type="text/javascript" src="./jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function() {
//获取列表数据的通用方法
function getList(code,flag,callback){
$.ajax({
url:'./data.php',
type:'get',
dataType:"jsonp",
data:{citycode:code,flag:flag},
success:callback
});
}
//获取地区信息的回调函数
var area = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#area").append(op);
});
}
//获取市信息的回调函数
var city = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#city").append(op);
});
//判断是否为直辖市
if(data.length == 1){
var citycode = $("#city").children("option").eq(0).attr("value");
getList(citycode,3,area);
} }
//获得省份信息的回调函数
var province = function(data){
$.each(data,function(i,element){
var op = $("<option></option>").attr("value",element.code).append(element.name);
$("#province").append(op);
});
//默认北京市
getList('110000',2,city);
getList('110100',3,area);
} //发送请求获取省份信息
getList(0,1,province); //给省份信息设置选择事件
$("#province").change(function() {
$("#city").children("option").remove();
$("#area").children("option").remove();
var pcode = $(this).val();
getList(pcode,2,city);
}); //给市信息设置选择事件
$("#city").change(function() {
$("#area").children("option").remove();
var citycode = $(this).val();
getList(citycode,3,area);
}); });
</script>
</head>
<body>
<div id="showInfo">
<div>
<select id="province">
</select>
</div>
<div>
<select id="city">
</select>
</div>
<div>
<select id="area">
</select>
</div>
</div>
</body>
</html>
HTML优化版代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市区三级联动</title>
<style type="text/css">
#showInfo{
position: absolute;
width: 600px;
height: 500px;
overflow-y: scroll;
overflow-x: hidden;
background: lightgreen;
left: 50%;
margin-left: -300px;
}
#showInfo div{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 160px;
}
#showInfo div select{
width: 160px;
}
</style>
<script type="text/javascript" src="./jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
function callback(id,code,flag){
$.ajax({
url:"./data.php",
type:"get",
dataType:"jsonp",
data:{citycode:code,flag:flag},
success:function(data){
$.each(data,function(i,element){//i表示索引,element表示每一项
var op= $("<option></option>").attr("value",element.code).append(element.name);//创建option,设置value属性,将name添加到option中
$("#"+id).append(op);//将op添加到province中
}); }
});
} var area=function(cCode){
callback('area',cCode,3);
}; var city=function(pCode){
callback('city',pCode,2);
};
//获取省份信息
var province=function(pCode){
callback('province',pCode,1);
}; //调用获取的省份信息
province(0);
city('110000');
area('110100'); //给省份注册选中事件
$('#province').change(function(){
$("#city").children("option").remove();//点击省，清空市
var pCode=$(this).val();
city(pCode);
});
//给市注册事件
$('#city').change(function(){
$("#area").children("option").remove();//点击市，清空区
var cCode=$(this).val();
area(cCode);
}); }); </script>
</head>
<body>
<div id="showInfo">
<div>
<select id="province">
</select>
</div>
<div>
<select id="city">
</select>
</div>
<div>
<select id="area">
</select>
</div>
</div>
</body>
</html>
2、data.php代码
<?php
require_once('connect.php'); $code = $_GET['citycode'];//获取省市区的编码
$callback = $_GET['callback'];
$flag = $_GET['flag'];//标志位，用来区分是省市区哪个
//查询省市区对应的列表数据
if($flag == 1){
$query=mysql_query("select * from province order by id");
}else if($flag == 2){
$query=mysql_query("select * from city where provincecode = '".$code."' order by id" );
}else if($flag == 3){
$query=mysql_query("select * from area where citycode = '".$code."' order by id" );
}
$sayList = [];
while ($row=mysql_fetch_array($query)) {
$sayList[] = array(
'code'=>$row['code'],
'name'=>$row['name']
);
}
if($sayList){
echo $callback.'('.json_encode($sayList).')'; }else{
echo $callback.'('.'[]'.')';
} ?>
3、连接数据库 connect.php
<?php
$host="localhost";
$db_user="root";
$db_pass="123456";
$db_name="mydb";
$timezone="Asia/Shanghai"; $link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8"); header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>
实现效果：
第117天：Ajax实现省市区三级联动的更多相关文章
- 基于ThinkPHP+AJAX的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- 基于thinkphp和ajax的省市区三级联动
练习,就当练习. 省市区三级联动,样式如下图所示: 1,导入两个js文件并且导入数据库文件. 两个js文件分别是jquery-2.1.4.min.js和jquery-1.js,数据库文件,见附件. 2 ...
- （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- ajax省市区三级联动
jdbc+servlet+ajax开发省市区三级联动 技术点:jdbc操作数据库,ajax提交,字符拦截器,三级联动 特点:局部刷新达到省市区三级联动,举一反三可以做商品分类等 宗旨:从实战中学习 博 ...
- Ajax来实现下拉框省市区三级联动效果（服务端基于express）
//服务端JS代码: //提供服务端的处理 const express = require('express'); const fs = require('fs'); const app = expr ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- 省市区三级联动（二）JS部分简单版
通过对上一篇<省市区三级联动>的学习发现JScript部分省市区的填充代码几乎相同,所以可以写成一个函数. 注意:html部分和chuli.php部分不变 1.下拉列表填充可以写成带参数的 ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
随机推荐
- 安装虚拟机及学习linux系统 20155222卢梓杰
安装虚拟机及学习linux系统 20155222卢梓杰 首先按照要求下载virtualbox,没有遇到问题. 接下来新建一个虚拟机,按照要求应当安装乌班图64,这里只有32位的.在网上搜寻了许久,终于 ...
- 20155304 2016-2017-2 《Java程序设计》实验三 敏捷开发与XP实践
实验三 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 实验步骤 (一)敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法应用到软件的开发.运营和维护上的过程.软件工程包括下列领 ...
- Hibernate框架用法
一,Hibernate框架介绍 没有Hibernate之前,使用jdbc来连接数据库时,需要反射加载驱动,再获取连接 在连接上获取sql承载块,传入sql语句执行,获取结果集,解析结果 Hiberna ...
- 简单的Slony-I设置实例 II
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL集群方案相关索引页 回到顶级页面:PostgreSQL索引页 接前面例子, 简单的Slony-I设置实例 这次我 ...
- HTTP请求方式：GET和POST的比较
GET和POST是HTTP的两个常用方法 什么是HTTP? 超文本传输协议(HyperText Transfer Prptocol-HTTP)是一个设计来使客户端和服务器顺利进行通讯的协议. HTTP ...
- Maven学习(五)-----如何从Maven远程存储库下载?
如何从Maven远程存储库下载? 根据 Apache Maven 的说明: Downloading in Maven is triggered by a project declaring a dep ...
- OpenCL入门：(三：GPU内存结构和性能优化)
如果我们需要优化kernel程序,我们必须知道一些GPU的底层知识,本文简单介绍一下GPU内存相关和线程调度知识,并且用一个小示例演示如何简单根据内存结构优化. 一.GPU总线寻址和合并内存访问 假设 ...
- mybatis拦截器使用
目录 mybatis 拦截器接口Interceptor spring boot + mybatis整合 创建自己的拦截器MyInterceptor @Intercepts注解 mybatis拦截器入门 ...
- 学习HTML 第二节.HTML头部
HTML为什么要有个头部?还不太明白,可能是一些要提前声明的东西吧.先看看有什么内容吧. 可以添加在头部区域的元素标签为: <title>标题,这个我们知道了: <meta>使 ...
- 数据库sql优化总结之2-百万级数据库优化方案+案例分析
项目背景 有三张百万级数据表 知识点表(ex_subject_point)9,316条数据 试题表(ex_question_junior)2,159,519条数据 有45个字段 知识点试题关系表(ex ...