ThinkPHP快速简单实现Ajax地区三级联动

2017-08-26 阅读：3037 类型：后端分类：ThinkPHP 标签： ThinkPHP

首先呢,我们准备好TP框架还有一个表,地区表,其中包含以下字段：

建表语句：

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>
 <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>
复制代码
Ok 接下来 我们需要先把省份给遍历出来。（我已经将数据库一些简单的已经全部配置好了）代码如下：<?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();
         }
     }
 }

这里为什么用到IS_POST 因为我请求打算用post请求所以我们为了方便可以在同一个方法里面搞定，我们用IS_POST就可以简单的区分！

接下来直接到Index.html模板里面将数据用Foreach遍历出来。

<!-- 省份 -->
 <select name="pro" id="pro">
     <foreach name="region" item="v">
     <option value="{$v.region_id}">{$v.region_name}</option>
     </foreach>
 </select>

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>

现在我们打印一下POST数据看看结果是什么

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();
     }
 }

我们可以看到打印出来的是广东的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);

接下来，我们在用Jquery 将刚才处理完的数据给他直接丢到市的下拉框里面。

$('#pro').change(function(){
     $.ajax({
         type:"post",
         url:"{:U('Index/Index')}",
         data:'pro_id='+$('#pro').val(),
         dataType:"json",
         success:function(data){
             $('#city').html(data);
         }
     });
 });

Ok，市区查询出来了。区县也是一样，我们查询用该市的ID作为条件去查询底下有多少个区

代码如下：

$('#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方法里面可以被接收到。接下来的操作都是一样的，只是遍历的地方不一样而已。
其实原生态的代码也是同样的原理。没有任何的区别。看完以后，有没有觉得很简单呢？？