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 相关文章推荐
在Windows版的PHP中使用ADO
Oct 09 PHP
删除无限分类并同时删除它下面的所有子分类的方法
Aug 08 PHP
php下使用curl模拟用户登陆的代码
Sep 10 PHP
discuz程序的PHP加密函数原理分析
Aug 05 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
Aug 23 PHP
比较简单的百度网盘文件直链PHP代码
Mar 24 PHP
LotusPhp笔记之:Logger组件的使用方法
May 06 PHP
深入PHP异步执行的详解
Jun 03 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
Nov 13 PHP
浅析php-fpm静态和动态执行方式的比较
Nov 09 PHP
Laravel学习教程之request validation的编写
Oct 25 PHP
PHP设计模式之观察者模式定义与用法分析
Apr 04 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实现的在线人员函数库
2008/04/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
完美解决thinkphp验证码出错无法显示的方法
2014/12/09 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
python super用法及原理详解
2020/01/20 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
PHP面试题及答案一
2012/06/18 面试题
四好少年事迹材料
2014/01/12 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
工程承诺书怎么写
2014/05/24 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
法定代表人证明书
2014/11/28 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
追悼会悼词大全
2015/06/23 职场文书
小学体育组工作总结
2015/08/13 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技