用jquery +ajax 實現與php後臺互動json資料
阿新 • • 發佈：2019-02-05
因為做了前段用jquery和ajax傳送post或get請求到後端伺服器，伺服器我是用nginx ，你也可以用apache，
後端技術使用php，例子很簡單，主要是理解了，擴充套件到複雜就沒有什麼問題。
程式碼給出，希望對大家有用：
這個是端html，你需要下載jquery :jquery下載
後端php程式碼：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src = "../js/jquery.js"></script> <script type="text/javascript"> function city_change(){ var province_value =$("#province").val() ; //獲取選擇的省份 var cityEle = $("#city"); //alert(province_value); var aj = $.ajax( { url:'/demo/test/c.php',// 跳轉到 action 獲取json資料的地址 data:{ province : province_value, }, type:'post', cache:false, dataType:'json', success:function(data) { //alert(data.data); if(data.msg =="true" ){ // view("修改成功！"); //alert("修改成功！"); if(data.data!=null){ cityEle.empty(); //清除舊元素 var city_num= data.data.length; //alert(data.data.length); for(var i=0;i<city_num;i++){ var option = new Option(data.data[i].city); cityEle.append(option); } //cityEle.append(); } }else{ //view(data.msg); } }, error : function() { // view("異常！"); alert("異常！"); } }); } </script> </head> <body> <select id= "province" onchange="city_change()"> <option >廣西</option> <option>廣東</option> </select> <select id = "city"> </select> </body> </html>
<?php $province = $_POST["province"]; if($province=='廣西'){ $json = new stdclass(); $data = array(); for($i = 0;$i<5;$i++){ $obj = new stdclass(); $obj ->city="廣西".$i."號"; $data[] = $obj; //講資料放到陣列中 } $json->data = $data; $json->msg = "true"; echo json_encode($json); } if($province=='廣東'){ $json = new stdclass(); $data = array(); for($i = 0;$i<5;$i++){ $obj = new stdclass(); $obj ->city="廣東".$i."號"; $data[] = $obj; //將資料放到陣列中 } $json->data = $data; $json->msg = "true"; echo json_encode($json); }
記錄每一步腳步