首先呢,我们准备好TP框架还有一个表,地区表,其中包含以下字段:
建表语句:
不想自己创建的朋友呢,可以去百度下载一个单独的地区表(里面已经有了地区数据了);
我这里用的Thinkphp版本是3.2.2 其实用法都一样!照葫芦画瓢,相信大家都会!
首先我们随便来一个HTML代码。我们这里使用Jquery1.7.2
Ok 接下来 我们需要先把省份给遍历出来。(我已经将数据库一些简单的已经全部配置好了)代码如下:
这里为什么用到IS_POST 因为我请求打算用post请求 所以我们为了方便可以在同一个方法里面搞定,我们用IS_POST就可以简单的区分!
接下来直接到Index.html模板里面将数据用Foreach遍历出来。
我们看看是否成功遍历!
OK了 省份已经遍历出来了 那么接下来都简单多了,我们只需要在用户选择地区的时候出发Ajax代码把父类ID用Ajax发送到Index方法处理就好了。代码如下:(我们需要接收json格式的数据)
现在我们打印一下POST数据 看看结果是什么
我们可以看到 打印出来的是广东的id
接下来需要拿这个父类的id 查询该父类下面有多少个对应的子类 并且将数据处理成Json格式在输出出去。代码如下:
接下来,我们在用Jquery 将刚才处理完的数据给他直接丢到市的下拉框里面。
Ok,市区查询出来了。区县也是一样,我们查询用该市的ID作为条件 去查询底下有多少个区
代码如下:
其实这里我们可以分为多个区间来判断 市的一个 区的一个 但是我这里简单起见 就放在一起了。
每一次请求一次 数据就会重新覆盖,所以呢,不会存在以前的数据存在的问题!
处理的数据是一样的。所以我们在Ajax请求的时候 需要保证参数一致 在Index方法里面可以被接收到。接下来的操作都是一样的,只是遍历的地方不一样而已。
其实原生态的代码也是同样的原理。没有任何的区别。看完以后,有没有觉得很简单呢??
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d790d3f4104.png)
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d790e0c780c.png)
建表语句:
- CREATE TABLE `tp_region` (
- `region_id` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
- `parent_id` smallint(5) unsigned NOT NULL DEFAULT '0',
- `region_name` varchar(120) NOT NULL DEFAULT '',
- `region_type` tinyint(1) NOT NULL DEFAULT '2',
- `agency_id` smallint(5) unsigned NOT NULL DEFAULT '0',
- `status` tinyint(4) NOT NULL COMMENT '0无效果,1已开通,2待开通,3,招募加盟商',
- PRIMARY KEY (`region_id`),
- KEY `parent_id` (`parent_id`),
- KEY `region_type` (`region_type`),
- KEY `agency_id` (`agency_id`)
- ) ENGINE=MyISAM AUTO_INCREMENT=3409 DEFAULT CHARSET=utf8;
复制代码
我这里用的Thinkphp版本是3.2.2 其实用法都一样!照葫芦画瓢,相信大家都会!
首先我们随便来一个HTML代码。我们这里使用Jquery1.7.2
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>phpsafe--PHP开发之Thinkphp实现Ajax地区三级联动</title>
- <script src="__PUBLIC__/Home/jquery-1.7.2.min.js"></script>
- </head>
- <body>
- <!-- 省份 -->
- <select name="pro" id="pro">
- <option></option>
- </select>
- <!-- 城市 -->
- <select name="city" id="city">
- <option></option>
- </select>
- <!-- 区县 -->
- <select name="area" id="area">
- <option></option>
- </select>
- </body>
- </html>
复制代码
- <?php
- namespace Home\Controller;
- use Think\Controller;
- class IndexController extends Controller
- {
- public function Index()
- {
- if (IS_POST) {
- } else {
- $parent_id['parent_id'] = 1;
- $region = M('Region')->where($parent_id)->select();
- $this->assign('region',$region);
- $this->display();
- }
- }
- }
复制代码
接下来直接到Index.html模板里面将数据用Foreach遍历出来。
- <!-- 省份 -->
- <select name="pro" id="pro">
- <foreach name="region" item="v">
- <option value="{$v.region_id}">{$v.region_name}</option>
- </foreach>
- </select>
复制代码
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d791563e1f9.png)
OK了 省份已经遍历出来了 那么接下来都简单多了,我们只需要在用户选择地区的时候出发Ajax代码把父类ID用Ajax发送到Index方法处理就好了。代码如下:(我们需要接收json格式的数据)
- <script>
- $('#pro').change(function(){
- $.ajax({
- type:"post",
- url:"{:U('Index/Index')}",
- data:'pro_id='+$('#pro').val(),
- dataType:"json",
- success:function(data){
- console.log(data);
- }
- });
- });
- </script>
复制代码
- public function Index()
- {
- if (IS_POST) {
- dump($_POST);
- } else {
- $parent_id['parent_id'] = 1;
- $region = M('Region')->where($parent_id)->select();
- $this->assign('region',$region);
- $this->display();
- }
- }
复制代码
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d791789f66e.png)
我们可以看到 打印出来的是广东的id
接下来需要拿这个父类的id 查询该父类下面有多少个对应的子类 并且将数据处理成Json格式在输出出去。代码如下:
- $parent_id['parent_id'] = I('post.pro_id','addslashes');
- $region = M('Region')->where($parent_id)->select();
- $opt = '<option>--请选择市区--</option>';
- foreach($region as $key=>$val){
- $opt .= "<option value='{$val['region_id']}'>{$val['region_name']}</option>";
- }
- echo json_encode($opt);
复制代码
- $('#pro').change(function(){
- $.ajax({
- type:"post",
- url:"{:U('Index/Index')}",
- data:'pro_id='+$('#pro').val(),
- dataType:"json",
- success:function(data){
- $('#city').html(data);
- }
- });
- });
复制代码
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d7919918c7e.png)
Ok,市区查询出来了。区县也是一样,我们查询用该市的ID作为条件 去查询底下有多少个区
![](http://www.thinkphp.cn/Uploads/editor/2016-09-13/57d791a4746bf.png)
代码如下:
- $('#city').change(function(){
- $.ajax({
- type:"post",
- url:"{:U('Index/Index')}",
- data:'pro_id='+$('#city').val(),
- dataType:"json",
- success:function(data){
- $('#area').html(data);
- }
- });
- });
复制代码
每一次请求一次 数据就会重新覆盖,所以呢,不会存在以前的数据存在的问题!
处理的数据是一样的。所以我们在Ajax请求的时候 需要保证参数一致 在Index方法里面可以被接收到。接下来的操作都是一样的,只是遍历的地方不一样而已。
其实原生态的代码也是同样的原理。没有任何的区别。看完以后,有没有觉得很简单呢??