php用ajax方式实现四级联动
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php用ajax方式实现四级联动相关的知识，希望对你有一定的参考价值。
使用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
以上是关于php用ajax方式实现四级联动的主要内容，如果未能解决你的问题，请参考以下文章