ajax实战篇---城市select联动----json交互
这里只变了 第二三四条线路 这里只列出关键的代码 详情请参考上一篇文章 ---ajax实战篇---城市select联动----XML交互
function sendRequest(){
myXmlHttpRequest=getXmlHttpObject();//从实例化的模型里面的方法函数
if(myXmlHttpRequest){
var url="./CityList.php";//url 属性 选择提交的地址
var data="provice="+$('sheng').value;//数据 id为sheng的数据取得数据
myXmlHttpRequest.open("post",url,true);//这里选择提交的方式post 异步操作
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//打开请求.
//指定为了第四步处理做准备回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli;
//第二部--------------------------发送数据到服务器端
myXmlHttpRequest.send(data);
}
}
<?php
//注意这里的要改成 xml 到 html 不要忘记了
header("Content-Type: text/html;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//获取用户提交城市名
$province=$_POST['provice'];
//第三步-------------------------------------准备返回xml格式的结果..
$result="";
if($province=="zhejiang"){
$result='[
{"city":"杭州"},
{"city":"台州"},
{"city":"丽水"},
]';
}else if($province=="jiangsu"){
$result='[
{"city":"南京"},
{"city":"淮安"},
{"city":"宿迁"},
]';
}
echo $result;
?>
function chuli(){
//成功返回
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
var cities=myXmlHttpRequest.responseText;//获取json的值
//打印出来是'{"message":"该用户不能用,已经注册"}';
var cities_obj=eval("("+cities+")");//实例化对象获得mes_obj对象 message作为对象里面的属性即可调用
$('city').length=0;
for(var i=0;i<cities_obj.length;i++){
var city_val=cities_obj[i].city;
//创建optiion
var myOption=document.createElement("option");
myOption.value=city_val;
myOption.innerText=city_val;
$('city').appendChild(myOption);
}
}
}
}
🐳 作者:hiszm 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,万分感谢。 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
![]() |