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

2017-08-26    标签:ThinkPHP    阅读:479   


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

【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/65.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

授人以鱼不如授人以渔!授人以鱼只救一时之急,授人以渔则可解一生之需!

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×