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

	           

	            }
          
				
			}
			
		}
	}