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 stream_context_create()作用和用法分析
Mar 29 PHP
php连接mssql数据库的几种方法
Feb 21 PHP
深入php-fpm的两种进程管理模式详解
Jun 03 PHP
ueditor 1.2.6 使用方法说明
Jul 24 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
Dec 01 PHP
PHP获得数组交集与差集的方法
Jun 10 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
Dec 18 PHP
全面了解PHP中的全局变量
Jun 17 PHP
PHP基于回溯算法解决n皇后问题的方法示例
Nov 07 PHP
php依赖注入知识点详解
Sep 23 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
Oct 04 PHP
实例化php类时传参的方法分析
Jun 05 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 PDO函数库详解
2010/04/27 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
vue中设置、获取、删除cookie的方法
2018/09/21 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
python对日志进行处理的实例代码
2018/10/06 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python集合基本概念与相关操作实例分析
2019/10/30 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
总监职责范文
2013/11/09 职场文书
综治宣传月活动总结
2014/04/28 职场文书
公司会议策划方案
2014/05/17 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
食品安全汇报材料
2014/08/18 职场文书
孩子教育的心得体会
2014/09/01 职场文书
教师个人事迹材料
2014/12/17 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
挂职个人工作总结
2015/03/05 职场文书
博士给导师的自荐信
2015/03/06 职场文书
埃及王子观后感
2015/06/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书