搜索
系统检测到您的用户名不符合规范:

ThinkPHP快速简单实现Ajax地区三级联动(很详细)

浏览:15430 发布日期:2016年09月13日 分类:技术分享 关键字: Ajax地区三级联动,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 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>
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方法里面可以被接收到。接下来的操作都是一样的,只是遍历的地方不一样而已。



其实原生态的代码也是同样的原理。没有任何的区别。看完以后,有没有觉得很简单呢??

复制或转载请注明出处 本文来自:Poacher'Blog:http://www.phpsafe.com/post-27.html
最佳答案
评论() 相关
后面还有条评论,
评论支持使用[code][/code]标签添加代码
您需要登录后才可以评论 登录 | 立即注册
收藏
清朝的宇宙
积分:121 等级:LV1
热点推荐
(追記) (追記ここまで)
最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。

AltStyle によって変換されたページ (->オリジナル) /