- 我的目的是用ajax从服务器获取省份信息然后显示页面上
- 当鼠标变动省份的时候,ajax从服务器返回该省份对应的字符串城市信息
-
省份信息显示正常,但是获取城市信息的时候,遇到了奇葩的问题
-
获取的城市信息永远是default的值 “你是个奇葩”,若是我手动指定$province = “山东省”则正确显示
实在找不到这个现象的原因,各种尝试
求高人指点
PS:AJAX没有问题,数据传输都是正常的
HTML的内容<!DOCTYPE html> <html> <head> <title>Ajax实现二级联动</title> <meta charset="utf-8"/> </head> <body> <form> <select id="province" name="XXX"> <option>请选择</option> </select> <select id="city"> <option>请选择</option> </select> </form> <script> //Ajax从服务器获取省份信息 var xhr = getXhr(); var province = document.getElementById('province'); window.onload=function(){ xhr.open("get","7-province.php?province=province"); xhr.send(null); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ var data = xhr.responseText; var provs = data.split(","); var provHTML = []; for(var i=0;i<provs.length;i++){ provHTML[i]="<option value="+provs[i]+">"+provs[i]+"</option>"; } province.innerHTML="<option>请选择</option>"+provHTML.join("");//join里空白的话默认 逗号分割 } } } //2.当用户选择省份信息时,Ajax获取城市信息 province.onchange = function(){ if(province.value!="请选择"){ xhr.open("post","7-cities.php"); xhr.setRequestHeader("Content-Type","Application/x-www-form-rulencoded"); //console.log(province.value);//OK xhr.send("province="+province.value); xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ var data = xhr.responseText; console.log(data); } } } } function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } </script> </body> </html>
省份PHP文件 7-province.php
-
<?php
$province = 0;
@$province = $_GET['province'];
// echo @province; //@是为了不显示警告
if(isset($province)){
echo "山东省,湖南省,河南省";
}
?>
城市php文件 7-cities.php
<?php
$province = null;
@$province = $_POST['province'];/*"山东省"*/ //这里直接让@$province = "山东省",页面返回字符串 "山东1,山东2,山东3,山东4,山东5"
if(isset($province)){
switch($province){
case "山东省":
echo "山东1,山东2,山东3,山东4,山东5";
break;
case "湖南省":
echo "湖南1,湖南2,湖南3";
break;
case "河南省":
echo "河南1,河南2";
break;
default:
echo "你真是个奇葩";
break;
}
}else{
echo 'prov无效';
}
?>