ajax实现省市联动(version 1)

需要写出联动程序，ajax最合适，毫不熟悉，看了视频然后自己调了下，一个简单的省市联动版本1。

主界面showCities.PHP

<html>
<head>
<Meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type = "text/javascript">

	function getXmlHttpObject(){
	
		var xmlHttpRequest;
		if(window.ActiveXObject){	
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xmlHttpRequest = new XMLHttpRequest();
		}
		return xmlHttpRequest;
	}
	
	var myXmlHttpRequest = "";
	


	function getCities(){
		
		myXmlHttpRequest = getXmlHttpObject();
		if(myXmlHttpRequest){
			 
			var url = "http://localhost/apt/aqxxgl/ajax/showCitiesPro.PHP";//post
			var data = "province=" + $('sheng').value;
			
			myXmlHttpRequest.open("post",url,true);
			
			myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	
			myXmlHttpRequest.onreadystatechange=chuli;
			
			myXmlHttpRequest.send(data);
		}
	}
	
	function chuli(){
		if(myXmlHttpRequest.readyState==4){
			if(myXmlHttpRequest.status==200){
			//alert(myXmlHttpRequest.responseXML);
			
			var cities = myXmlHttpRequest.responseXML.getElementsByTagName("city");
			
			//window.alert(cities.length);
			
			$('city').length = 0;
			var myOption = document.createElement("option");
				
				myOption.innerText = "--城市--";
				$('city').appendChild(myOption);			
			
			
			for(var i=0;i<cities.length;i++)
			{
				var city_name = cities[i].childNodes[0].nodeValue;
				//window.alert(city_name);
				var myOption = document.createElement("option");
				myOption.value = city_name;
				myOption.innerText = city_name;
				$('city').appendChild(myOption);
			}
			
				//取出服务器的数据
				/*
		var cities = myXmlHttpRequest.responseXML.getElementsByTagName("city");
				//遍历并取出城市
				$('city').length = 0;
			
				for(var i=0;i<cities.length;i++)
				{
					var city_name = cities[i].childNodes[0].nodeValue;
					//创建新的元素option
					var myOption = document.createElement("option");
					myOption.value=city_name;
					myOption.innerHTML = city_name;
					//添加到select框中
					$('city').appendChild(myOption);
				}
				*/

		//	window.alert(myXmlHttpRequest.responseXML);
			}
			else {
			
			alert("error!~");
			}
		}
	}
	
	function $(id){
		return document.getElementById(id);
	}

</script>



</head>



<body>
	<select id = "sheng" onchange="getCities();">
	<option value = "">---省---</option>
	<option value = "zhejiang">浙江</option>
	<option value = "jiangsu">江苏</option>
	</select>
	
	<select id = "city">
	<option value = "">--城市--</option>
	</select>
	
	<select id = "county">
	<option value = "">--县城--</option>
	</select>

</body>
</html>

调动的showCitiesPro.PHP。

<?PHP 
	header("Content-Type:text/xml;charset=utf-8");
	header("Cache-Control:no-cache");
	
	$province = $_POST['province'];
	
	file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);
	
	//到数据库查询省有哪些（现在先不到数据库）
	if($province=="zhejiang"){
		$info = "<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
	}else if($province=="jiangsu"){
	    $info = "<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
	}	
	
	echo $info;
	//echo "data received:";


?>

这样可以实现简单的二级联动，后续更深入待续。

ajax实现省市联动(version 1)

猜你在找的Ajax相关文章