PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    ajax实现的二级联动菜单代码分享

    作者:admin来源:B5教程网浏览:时间:2020-09-30 00:07:50我要评论
    导读:一个很简单的ajax二级联动菜单代码分享,含php代码,需要的朋友可以参考一下。
    一个很简单的ajax二级联动菜单代码分享,含php代码,需要的朋友可以参考一下。

     
    复制代码代码如下:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>ajax 二级联动菜单代码分享</title>
    6. <script language="javascript">
    7. var http_request=false;
    8.   function send_request(url){//初始化,指定处理函数,发送请求的函数
    9.     http_request=false;
    10.  //开始初始化XMLHttpRequest对象
    11.  if(window.XMLHttpRequest){//Mozilla浏览器
    12.   http_request=new XMLHttpRequest();
    13.   if(http_request.overrideMimeType){//设置MIME类别
    14.     http_request.overrideMimeType("text/xml");
    15.   }
    16.  }
    17.  else if(window.ActiveXObject){//IE浏览器
    18.   try{
    19.    http_request=new ActiveXObject("Msxml2.XMLHttp");
    20.   }catch(e){
    21.    try{
    22.    http_request=new ActiveXobject("Microsoft.XMLHttp");
    23.    }catch(e){}
    24.   }
    25.     }
    26.  if(!http_request){//异常,创建对象实例失败
    27.   window.alert("创建XMLHttp对象失败!");
    28.   return false;
    29.  }
    30.  http_request.onreadystatechange=processrequest;
    31.  //确定发送请求方式,URL,及是否同步执行下段代码
    32.     http_request.open("GET",url,true);
    33.  http_request.send(null);
    34.   }
    35.   //处理返回信息的函数
    36.   function processrequest(){
    37.    if(http_request.readyState==4){//判断对象状态
    38.      if(http_request.status==200){//信息已成功返回,开始处理信息
    39.    document.getElementById(reobj).innerHTML=http_request.responseText;
    40.   }
    41.   else{//页面不正常
    42.    alert("您所请求的页面不正常!");
    43.   }
    44.    }
    45.   }
    46.   function getclass(obj){
    47.    var pid=document.form1.select1.value;
    48.    document.getElementById(obj).innerHTML="";
    49.    send_request('doclass.php?pid='+pid);
    50.    reobj=obj;
    51.   }
    52.  
    53. </script>
    54. </head>
    55. <body>
    56. <form name="form1">
    57. <select name="select1" id="class1" style="width:100;" onChange="getclass('class2');">
    58.   <option selected="selected"></option>
    59.   <option value="1">大类1</option>
    60.   <option value="2">大类2</option>
    61. </select>
    62. <select name="select2"id="class2" style="width:100;">
    63. </select>
    64. </form>
    65. </body>
    66. </html>
    67.  

    php 代码:

     
    复制代码代码如下:
    1. <?php
    2.   header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码
    3.   $pid=$_GET['pid'];
    4.   $db=mysql_connect("localhost","root","7529639"); //创建数据库连接
    5.   mysql_query("set names 'GBK'");
    6.   mysql_select_db("menuclass");
    7.   $sql="select classname from menu where parentid=".$pid."";
    8.   $result=mysql_query($sql);
    9.  
    10.   //循环列出选项
    11.   while($rows=mysql_fetch_array($result)){
    12.    echo ';
    13.       echo $rows['classname'];
    14.    echo "n";
    15.   }
    16. ?>






    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-410-1.html
    相关热词搜索: ajax 二级 联动 菜单