省市区三级联动(jquery+ajax)(封装和不封装两种方式)-----2017-05-15
首先,要实现如下图效果,
1、要理清思路:
先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理。
2、用到的数据库表:Chinastates表
规律:根据国家级(中国)的areacode查询省级(如:北京) ; 根据省级的areacode查询市级(如:北京市辖);根据市级的areacode查询区级(如东城区)
第一种方式:没有用到封装,数据读取较慢,可以看看原理,这样在第二种方式封装时就容易多了。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../jquery-1.11.2.min.js"></script> </head> <body> <select id="sheng"></select> <select id="shi"></select> <select id="qu"></select> </body> </html> <script type="text/javascript"> $(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<hang.length;i++) { var lie = hang[i].split("^"); str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#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<hang2.length;i++) { var lie2=hang2[i].split("^"); str2 = str2 +"<option value ='"+lie2[0]+"'>"+lie2[1]+"</option>"; } $("#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<hang3.length;i++) { var lie3=hang3[i].split("^"); str3 = str3 +"<option value ='"+lie3[0]+"'>"+lie3[1]+"</option>"; } $("#qu").html(str3); } }); }) }) </script>
期间出现的问题:每个下拉列表的第一个数据输不出来:是因为每个下拉列表的第一个数据的value值都带有空格!!!所以在输出data时要去空格!!!
data返回的值可能带有空格换行等,所以要用trim()方法去空格!!!
第二种方式:封装成插件,以后可以随时调用(重要)
(1)主页面:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
//引入jquery包 <script src="../jquery-1.11.2.min.js"></script>
//引用我们自己封装的js文件 <script src="sanji.js"></script> </head> <body>
//id要与封装的js插件中一致 <div id="sanji"></div> </body> </html>
(2)我们自己封装的js插件
$(document).ready(function(e){ //扔三个下拉列表到主页面建的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: { 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 + "<option value='" + lie[0] + "'>" + lie[1] + "</option>"; } $("#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 + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>"; } $("#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 + "<option value = '" + lie[0] + "'>" + lie[1] + "</option>"; } $("#qu").html(str); } }); }
其次就是处理页面(两种方法都用到的):chuli.php
<?php $code=$_POST["code"]; require "DB.class.php"; $db=new DB(); $sql="select areacode,areaname from chinastates where parentareacode='{$code}'"; $str=$db->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)(封装和不封装两种方式)-----2017-05-15的更多相关文章
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 总结Ajax验证注册功能的两种方式
方法一:使用jqueryForm插件提交表单注册 ①首先引入jquery和jqueryForm插件 <script type="text/javascript" src=&q ...
- 使用jQuery编辑删除页面内容,两种方式
第一种,比较少的编辑用这种,直接在那块内容上编辑,失去焦点即完成 前几天做编辑框的时候,需要只修改一个状态 //编辑角色 function editTr($this){ thatTd=$($this) ...
- Jquery EasyUI修改行背景的两种方式
1.数据加载完成不请求后台的做法 方式一: //更改表格行背景 function changeLineStyle(index){ var rows=$("#alertGird"). ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...
- 项目一:第九天 1、前台客户登录 2、Jquery citypicker省市区三级联动插件 4、业务受理(在线下单)
1. 前台客户登录 2. Jquery citypicker省市区三级联动插件 3. 百度地图介绍 4. 业务受理(在线下单) 1 实现前台系统登录功能 1.1 Md5加密 admin(明文)---- ...
- 第117天:Ajax实现省市区三级联动
Ajax实现省市区三级联动 思路: (1)首先获取省份信息 (2)发起Ajax请求,注意dataType中的T大写 (3)封装回调函数,回调函数success中用$.each循环每一条数据,动态创建o ...
- 【JavaScript&jQuery】省市区三级联动
HTML: <%@page import="com.mysql.jdbc.Connection"%> <%@ page language="java&q ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
随机推荐
- 聊一聊Python与C++的不同(二)
今天我们聊一下基本数据类型吧, 在学习c++的时候我们要记住几种数据类型,int,float,double,long,char,double,string,bool,每次使用都要明确定义每个数据类型, ...
- Unity 3D Framework Designing(9)——构建统一的 Repository
谈到 『Repository』 仓储模式,第一映像就是封装了对数据的访问和持久化.Repository 模式的理念核心是定义了一个规范,即接口『Interface』,在这个规范里面定义了访问以及持久化 ...
- Servlet过滤器和监听器知识总结(转)
Servlet过滤器和监听器知识总结(转) Servlet过滤器是 Servlet 程序的一种特殊用法,主要用来完成一些通用的操作,如编码的过滤.判断用户的登录状态.过滤器使得Servlet开发者能 ...
- sass.scss简单入门
最近研究了一下sass和scss,清晰结构化,在某些地方的确强大,所以写了一篇入门教程,大概15分钟左右就能明白基本原理 什么是sass(css预处理器) Sass官网上是这样描述sass的,sass ...
- Ubuntu离线安装VSCode(附带前期准备工作)
跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在说正式步骤前先把准备工作做到位: 1.IP设置,这个因为是GUI的,手动设置 ...
- [SinGuLaRiTy] 字节大小
[SinGuLaRiTy-1006] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 16位编译器 char 1个字节 char*(即指针变量 ...
- 【Electron】Electron开发入门(四):操作PC端文件系统
一.调用PC端默认方式打开本地文件 在main.js里 // 打开系统本地文件或者网页链接 const {shell} = require('electron'); // Open a local f ...
- WPF之路一:相对路径图片显示
由于公司项目的需要,改为WPF开发,因此需要学习WPF,遇到的第一个问题就是在显示的图片的时候,写绝对路径,图片显示没有问题,但是写相对路径的时候,发现图片无法正常显示,在网上搜了一下,得到的答案是需 ...
- android 学习笔记(1)
内容来源:高成珍.钟元生<Android编程经典案例>学习笔记 表格布局——TableLayout 表格布局以行和列的方式来管理界面的布局,但并不能明确声明包含几行几列.可通过TableR ...
- goagant:403. That’s an error.
报错: . That’s an error. Your client does not have permission to get URL / from this server. That’s al ...