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连接Oracle数据库
Oct 09 PHP
php自动给文章加关键词链接的函数代码
Nov 29 PHP
linux实现php定时执行cron任务详解
Dec 24 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
Jul 28 PHP
php在数据库抽象层简单使用PDO的方法
Nov 03 PHP
PHP入门教程之上传文件实例详解
Sep 11 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
Jan 30 PHP
关于PHP内置的字符串处理函数详解
Feb 04 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
Feb 08 PHP
PHP实现的Redis多库选择功能单例类
Jul 27 PHP
浅析PHP数据导出知识点
Feb 17 PHP
gearman中任务的优先级和返回状态实例分析
Feb 27 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水印技术
2007/02/14 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
轻松搞定js表单验证
2016/10/13 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
vue实现登录功能
2020/12/31 Vue.js
python ddt实现数据驱动
2018/03/14 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python接口测试get请求过程详解
2020/02/28 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
爱游人:Travelliker
2017/09/05 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
小学教师师德演讲稿
2014/05/06 职场文书
学校2014年度工作总结
2014/12/06 职场文书
安全教育片观后感
2015/06/17 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
元宵节晚会主持词
2015/07/01 职场文书
2016公司年会主持词
2015/07/01 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
python 爬取华为应用市场评论
2021/05/29 Python
Go语言基础知识点介绍
2021/07/04 Golang
python如何查找列表中元素的位置
2022/05/30 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript