ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单


Posted in PHP onMay 15, 2014

首先是数据库的设计。分类表叫cate.

我做的是分类数据的二级联动,数据需要的字段有:id,name(中文名),pid(父id).

父id的设置: 若数据没有上一级,则父id为0,若有上级,则父id为上一级的id。

数据库有内容后,就可以开始写代码,进行二级联动的实现。

先在后台php获取所有pid为0的数据,保存到$cate中,然后在第一层的<select>中用foreach循环输出。

Html代码:

<select name="type" size="1" id="type">
    <option>请选择类型</option>
     <foreach name='cate' item='v'>
         <option value="{$v['ca_id']}">{$v.ca_name}</option>
     </foreach>
 </select>
 标签:
 <select name="lable" size="1" id="lables">
 </select>

Ajax代码:

  $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i<count;i++){
                               b+="<option value='"+data[i].ca_id+"'>"+data[i].ca_name+"</option>";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax代码在第一层类型改变后触发,ajax方法的主要参数有

      1.url:后台接收ajax的地址;

      2.data:传到后台的数据,一般用json传递;这里传递的是选中类的id值。

      3.type:传递方法,有get和post方法,我一般用post,可以传输的数据比get多,安全性也高些;

      4.error:ajax执行失败的方法;

      5.success:ajax执行成功的方法,也就是回调函数。这里在执行success时,我先用empty()清空了第二个下拉菜单的内容,然后再输出从后台获取的数据。

下面是Thinkphp接收ajax数据并处理的页面

//后台ajax验证
  $result = array();
  $cate =$_POST['type'];
  $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
  $this->ajaxReturn($result,"JSON");

Thinkphp的I()方法其实可以看成$_POST[],这样来获取ajax传递过来的第一层选中内容的id,接着,获取其子类,然后用ajaxReturn()返回给ajax,这里设置了返回数据以json形式,所以ajax会以json形式接收到数据

原生php的返回数据方式:

   //搜索结果为$result
   .....
   echo json_encode($result);

这样就完成了2级联动下拉菜单的实现,需要注意的是,url得保证正确,后台接收到也需要有返回值,不然ajax也不会执行success方法的。

PHP 相关文章推荐
PHP开发入门教程之面向对象
Dec 05 PHP
Ajax PHP 边学边练 之三 数据库
Nov 26 PHP
比较时间段一与时间段二是否有交集的php函数
May 31 PHP
详谈PHP文件目录基础操作
Nov 11 PHP
PHP中shuffle数组值随便排序函数用法
Nov 21 PHP
Discuz!X中SESSION机制实例详解
Sep 23 PHP
PHP基于curl后台远程登录正方教务系统的方法
Oct 14 PHP
PHP数组内存利用率低和弱类型详细解读
Aug 10 PHP
PHP实现微信申请退款功能
Oct 01 PHP
php如何利用pecl安装mongodb扩展详解
Jan 09 PHP
php遍历目录下文件并按修改时间排序操作示例
Jul 12 PHP
PHP字符串与数组处理函数用法小结
Jan 07 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
May 15 #PHP
ThinkPHP使用心得分享-分页类Page的用法
May 15 #PHP
php自定义函数截取汉字长度
May 15 #PHP
php获取服务器端mac和客户端mac的地址支持WIN/LINUX
May 15 #PHP
php小技巧之过滤ascii控制字符
May 14 #PHP
PHP 之 写时复制介绍(Copy On Write)
May 13 #PHP
PHP中copy on write写时复制机制介绍
May 13 #PHP
You might like
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
非常漂亮的相册集 使用jquery制作相册集
2016/04/28 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
[01:45:05]VGJ.T vs Newbee Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
电气工程和自动化自荐信范文
2013/12/25 职场文书
服装设计专业自荐信
2014/06/17 职场文书
故意伤害辩护词
2015/05/21 职场文书