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
- php搭配js或jquery用ajax完成三级联动
- PHP+JS+AJAX 三级联动
- jquery+ajax+php+json三级联动
- jquery ajax 三级联动
- jQuery Ajax三级联动
- jquery+php+mysql实现Ajax省市县三级联动
- Jquery实现ajax三级联动
- php+js+ajax+mysql实现省市三级联动
- php+ajax+mysql三级联动
- 用php+mysql+json+js+ajax实现省市县三级联动
- 用jquery的ajax方法实现三级联动
- JQuery Ajax三级联动地区下拉框
- JQuery Ajax三级联动地区下拉框
- jquery省市区三级联动插件,无ajax
- 使用Ajax+jQuery实现省市区三级联动
- Jquery通过ajax实现三级联动
- jQuery下的ajax 三级联动
- jquery ajax实现省市区三级联动
- jquery全选,jquery全不选,jquery反选
- 总结七条助你成为Linux高手的超棒忠告
- 机器学习小组知识点5:随机梯度下降(SGD)以及与批量梯度下降(BGD)的比较
- [c++简单小游戏]东搞西搞第三弹——伪的不能再伪的字符游戏库。。。
- C# HTTP Module 注册
- php搭配js或jquery用ajax完成三级联动
- 二分查找,数组
- oj打印数字图形
- 转:Redis使用认证密码登录
- static和被裁的符号表
- .bss段 .data段 C语言后汇编汇编查看代码
- 百度地图——定位
- Elastic-Job何为分布式作业
- SynchronousQueue学习笔记