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

	           

	            }
          
				
			}
			
		}
	}