php搭配js或jquery用ajax完成三级联动

来源:互联网 发布:阿里云centos图形界面 编辑:程序博客网 时间:2024/06/14 23:39

先贴上代码
html部分:

<div id="game">            <ul class="kuang fl publishType" id="gameM">                    <li class="focusk" id="focusk">                        <a attr="10" attrname="代练" class="gametype focusk" href="javascript:next('1','1');">代练<img src="../style2/images/left.png" alt="left"></a>                    </li>            </ul></div>

a标签里面是加入一个点击函数href="javascript:next('1','1');"
当点击的时候触发这个js函数,函数里面包含两个值,一个是type,用于区分模块儿,一个是id用于查询下级模块儿里的内容

js部分:

<script type="text/javascript">    function next(type,id){        var typegame=parseInt(type)+1;        if(type=='1'){            $("#game ul").nextAll().remove();        }        if(type=='2'){            $("#games1").nextAll().remove();        }        if(type=='3'){            $("#games2").nextAll().remove();        }        //这里用于判断该模块下有没有子模块,如果有的话,先删除子模块,再重新生成一个新的子模块,避免一个模块点击之后重复显示该模块下的子模块//----------//ajax里面第一个属性type是传值类型,//第二个属性url是传值的地址,//第三个属性data是需要传过去的值,//第四个属性是返回值的类型(如果后台返回的值是数组,需要用json_encode来进行转化)//第五个属性是成功后调用的函数        $.ajax({            type:"post",            url:"user_goods.php?act=goods_leveling_ajax",            data : {"type" : type,"id" : id},            dataType : "json",            success : function(data) {                        var htm = "<ul class='kuang fl games' id='games"+type+"'>";                        var len=data.length;//获取返回的值的长度                        if(len==0){                            //alert("无下级菜单");                            ob.find("img").remove();                            return false;                        }                        for (var i = 0; i < len; i++) {                            htm+="<li class='list"+type+"' name='list"+type+"'>"+                                            "<a class='gameA gameAs"+data[i].cat_id+"' attr='"+ data[i].cat_id+ "' attrName='"+data[i].cat_name+"' href=javascript:next('"+typegame+"','"+data[i].cat_id+"');  parentId='"+data[i].cat_id+"'>"+                                            data[i].cat_name+                                            "<img src='../style2/images/left.png\' alt='left'>"+                                            "</a>"+                                        "</li>";                        }                        htm+="</ul>";                            $("#game").append(htm);//htm是拼接出来的需要显示的html,append是将拼接出来的页面代码加入到"#game"后面                                              $('.list1').each(function(){                            $(this).click(function(){                                $('.list1').removeClass('focusk');                                $('.list1').removeClass('list');                                $(this).addClass('focusk');                            })                        })                        $('.list2').each(function(){                            $(this).click(function(){                                $('.list2').removeClass('focusk');                                $('.list2').removeClass('list');                                $(this).addClass('focusk');                            })                        })                        $('.list3').each(function(){                            $(this).click(function(){                                $('.list3').removeClass('focusk');                                $('.list3').removeClass('list');                                $(this).addClass('focusk');                            })                        })    //最后部分是判断如果当前点击的这一栏则加个其它的显示效果                   //parent.after(htm);                    }        });    }</script>

php部分:

if ($_REQUEST['act'] == 'goods_leveling_ajax'){        $type=$_POST['type'];    $id=$_POST['id'];    /*获取前台页面ajax传过来的值*/    if($type=='1'){        $sql="SELECT cat_id,cat_name FROM ecs_category WHERE parent_id='11'";        $game=$db->getAll($sql);        if($game){            echo json_encode($game);            /*将查询出来的结果进行json_encode处理,并且返回到页面*/        }else{            die('失败');        }    }elseif($type=='2'){        $sql="SELECT cat_id,cat_name FROM ecs_category WHERE parent_id='$id'";        $server=$db->getAll($sql);        if($server){            echo json_encode($server);        }else{            die('失败');        }    }elseif($type=='3'){        $sql="SELECT cat_id,cat_name FROM ecs_category WHERE parent_id='$id'";        $zone=$db->getAll($sql);        if($zone){            echo json_encode($zone);        }else{            die('失败');        }    }  }

这里写图片描述
这里写图片描述

0 0
原创粉丝点击