php用ajax方式实现四级联动

最新推荐文章于 2021-04-01 21:12:54 发布

weixin_30408309

最新推荐文章于 2021-04-01 21:12:54 发布

阅读量208

点赞数

文章标签： php 数据库 json

原文链接：http://www.cnblogs.com/liyante/p/7820265.html

版权

使用ajax方式实现了下简单的四级联动，

　数据库：

　以下为前台代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>
  5         四级联动
  6     </title>
  7     <meta charset="utf-8">
  8     <script type="text/javascript" src = "jquery.min.js" ></script>
  9 
 10 </head>
 11 <body>
 12     
 13     <table border="1px" align="center" width="800px" >
 14         <form>
 15             <tr>
 16                 <th>国家</th><th>省</th><th>市</th><th>县</th>
 17             </tr>
 18             <tr>
 19                 <td>
 20                 <select  id = "guo">
 21                 </select>
 22                 </td>
 23                 <td>
 24                 <select  id = "sheng">
 25                 </select>
 26                 </td>
 27                 <td>
 28                 <select  id = "shi">
 29                 </select>
 30                 </td>
 31                 <td>
 32                 <select id = "xian">    
 33                 </select>
 34                 </td>
 35             </tr>
 36         </form>
 37     </table>
 38     
 39 </body>
 40 <script type="text/javascript">
 41 
 42     $(function(){
 43         //首先在加载时直接让第一栏展示一级类目
 44         $.ajax({
 45             'url':"liandong.php",
 46             'data':{pid:0},
 47             'type':"post",
 48             'dataType':"json",
 49             'success':function(data){
 50                 var result = data;
 51                 var str = "<option>请选择</option>";
 52                 //将接收到的数据遍历并拼接到字符串str中
 53                 $.each(result,function(index,value){
 54                     str+= "<option value="+value.id+">"+value.area+"</option>";
 55 
 56                 });
 57                 //将字符串str添加到select中
 58                 $('#guo').html(str);    
 59             }
 60         });
 61 
 62         //当一级栏目发生变更，触发change事件
 63         $('#guo').change(function(){
 64             var a = $('#guo option:selected').attr("value");
 65 
 66             $.ajax({
 67                 'url':"liandong.php",
 68                 'data':{pid:a},
 69                 'type':"post",
 70                 'dataType':"json",
 71                 'success':function(data2){
 72                     var result2 = data2;
 73                     var str2 = "<option>请选择</option>";
 74                     $.each(result2,function(i,v){
 75                         str2 += "<option value="+v.id+">"+v.area+"</option>";
 76 
 77                     });
 78 
 79                     $('#sheng').html(str2);    
 80                 }
 81             });
 82         });
 83         
 84         $('#sheng').change(function(){
 85             var b = $('#sheng option:selected').attr("value");
 86 
 87             $.ajax({
 88                 'url':"liandong.php",
 89                 'data':{pid:b},
 90                 'type':"post",
 91                 'dataType':"json",
 92                 'success':function(data3){
 93                     var result3 = data3;
 94                     var str3 = "<option>请选择</option>";
 95                     $.each(result3,function(i,v){
 96                         
 97                         str3 += "<option value="+v.id+">"+v.area+"</option>";
 98 
 99                     });
100 
101                     $('#shi').html(str3);    
102                 }
103             });
104         });
105 
106         $('#shi').change(function(){
107             var c = $('#shi option:selected').attr("value");
108 
109             $.ajax({
110                 'url':"liandong.php",
111                 'data':{pid:c},
112                 'type':"post",
113                 'dataType':"json",
114                 'success':function(data4){
115                     var result4 = data4;
116                     var str4 = "<option>请选择</option>";
117                     $.each(result4,function(i,v){
118                         str4 += "<option value="+v.id+">"+v.area+"</option>";
119 
120                     });
121 
122                     $('#xian').html(str4);    
123                 }
124             });
125         });
126     });
127     
128     
129 
130 </script>
131 
132 </html>

php代码：

 1 header('content-type:text/html;charset=utf-8');
 2 
 3 function mysql_get($sql){
 4 
 5     //连接数据库
 6     $mysql = mysqli_connect("localhost","root","root","lx");
 7 
 8     //执行sql语句
 9     $result = mysqli_query($mysql,$sql);
10     //定义空数组
11     $data = array();
12 
13     //从结果集中取出数据存入data中
14     while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
15     $data[] = $row;
16     }
17 
18     return $data;
19 }
20 
21 //接收pid
22 $pid = $_POST['pid'];
23 
24 $sql = "select * from sp_area where pid = $pid";
25 //调用自定义的mysql_get函数
26 $data = mysql_get($sql);
27 
28 //echo 到前台页面
29 echo json_encode($data);
30

转载于:https://www.cnblogs.com/liyante/p/7820265.html

weixin_30408309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php用ajax方式实现四级联动

使用ajax方式实现了下简单的四级联动，　数据库：　　　以下为前台代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> 5 四级联动 6 </title> 7 <meta c...
复制链接

扫一扫