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);                       }          }}}