php用ajax方式實現四級聯動
阿新 • • 發佈：2017-11-12
tle 空數組 str 簡單的 oca align 調用 select ble
使用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方式實現四級聯動