mysql php ajax 使用jsonp跨域完成省市三级联动
mydb.sql
用到了area，city，province 三个表
cont.php 连接数据库
data2.php 得到前端传过来的值，处理SQL语句，输出内容。因为使用jsonp方式，就是输出函数名里面加上参数就可以了。ajax的跨域问题可以看我ajax的文章
<?php require_once(‘cont.php‘); $code = $_GET[‘citycode‘]; $callback = $_GET[‘callback‘]; $flag = $_GET[‘flag‘]; if($flag == 1){ $retval= mysqli_query($conn,"select * from province order by id"); }else if($flag == 2){ $retval= mysqli_query($conn,"select * from city where provincecode = ‘".$code."‘ order by id" ); }else if($flag == 3){ $retval= mysqli_query($conn,"select * from area where citycode = ‘".$code."‘ order by id" ); } // 创建一个空数据 $sayList = []; // 循环遍历得到数据库内容 while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC)){ $sayList[]= array(‘code‘=>$row[‘code‘],‘name‘=>$row[‘name‘]);//二维数组 } // // 数组长度 // echo count($sayList); // // 数组结构 // print_r($sayList); // 循环遍历 // for($i=0;$i<11;$i++){ // for($j=0;$j<2;$j++){ // echo $sayList[$i][‘code‘]."-->".$sayList[$i][‘name‘]; // } // } if($sayList){ echo $callback.‘(‘.json_encode($sayList).‘)‘; }else{ echo $callback.‘(‘.‘[]‘.‘)‘; } ?>
select.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #showInfo{ position: absolute; width: 600px; height: 500px; overflow-y: scroll; overflow-x: hidden; background: lightgreen; left: 50%; margin-left: -300px; } #showInfo div{ float:left; margin-left: 30px; margin-top: 30px; width: 160px; } #showInfo div select{ width: 160px; } </style> </head> <body> <div id="showInfo"> <div> <select id="province"> </select> </div> <div> <select id="city"> </select> </div> <div> <select id="area"> </select> </div> </div> <script type="text/javascript"> $(function(){ //获取列表数据的通用方法 function getList(code,flag,callback){ $.ajax({ url:‘data2.php‘, type:‘get‘, dataType:"jsonp", data:{citycode:code,flag:flag}, success:callback }); } //获取地区信息的回调函数 var area = function(data){ $.each(data,function(i,element){ var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#area").append(op); }); } // 拼接市 var city=function(data){ for (var i = 0; i <data.length; i++) { var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#city").append(op); } // 判断是否是直辖市，即只有一个市 if(data.length == 1){ var citycode = $("#city").children("option").eq(0).attr("value"); getList(citycode,3,area); } } // 拼接省 var pr=function(data){ for (var i = 0; i <data.length; i++) { var op = $("<option></option>").attr("value",data[i].code).append(data[i].name); $("#province").append(op); } //默认北京市 getList(‘110000‘,2,city); getList(‘110100‘,3,area); } // 刚开始调用函数 getList(1,1,pr) //给省份信息设置选择事件 $("#province").change(function() { $("#city").children("option").remove(); $("#area").children("option").remove(); var pcode = $(this).val(); getList(pcode,2,city); }); //给省份信息设置选择事件 $("#city").change(function() { $("#area").children("option").remove(); var citycode = $(this).val(); getList(citycode,3,area); }); }) </script> </body> </html>