ajax 省市联动代码

发布时间：2020-12-16 01:44:57 所属栏目：百科来源：网络整理

导读：省市联动：代码如下： showCities.php： span style="font-size:18px;"htmlheadmeta http-equiv="content-type" content="text/html;charset=utf-8"/script type="text/javascript"//创建ajax引擎function getXmlHttpObject(){var xmlHttpRequest;//不同的

省市联动：

代码如下：

showCities.php：

<span style="font-size:18px;"><html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript">


//创建ajax引擎
	function getXmlHttpObject(){
		
		var xmlHttpRequest;
		//不同的浏览器获取对象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="/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){
				
				//取出服务器回送的数据

				var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
				
<span style="white-space:pre">				</span>//每次加载数据之前将已存在数据清空
				$('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;
					//创建新的元素option
					var myOption=document.createElement("option");
					myOption.value=city_name;
					myOption.innerText=city_name;
					//添加到
					$('city').appendChild(myOption);
				}
			}
		}
	}


	//这里我们写一个函数
	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>
    <option value="sichuan" >四川</option>
    </select>
    <select id="city">
    <option value="">--城市--</option>
    </select>
    
     <select id="county">
    <option value="">--县城--</option>
    </select>

</body>
</html>
</span>

showCitiesProcess.php：

<span style="font-size:18px;"><?php

	//服务器端

	//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
	header("Content-Type: text/xml;charset=utf-8");
	//告诉浏览器不要缓存数据
	header("Cache-Control: no-cache");


	//接收用户的选择的省的名字

	$province=$_POST['province'];

	file_put_contents("d:/mylog.log",$province."rn",FILE_APPEND);
	//如何在调试过程中，看到接收到的数据 。
	//到数据库去查询省有那些城市(现在先不到数据库)
	$info="";
	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;

?>
</span>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

ajax 省市联动 代码

省市联动：

ajax 省市联动代码