省市联动 ajax

最新推荐文章于 2025-12-07 20:09:59 发布

原创最新推荐文章于 2025-12-07 20:09:59 发布 · 724 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax

ajax 专栏收录该内容

6 篇文章

订阅专栏

此博客展示了如何通过省市联动实现城市选择，并利用AJAX技术从服务器动态获取对应城市的列表，采用PHP作为后端处理数据，实现用户交互与数据响应的无缝衔接。

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>省市联动</title>	
</head>
<script language="javascript" type="text/javascript">
	//创建ajax引擎
			function getXmlHttpObject()
				{
				  var xmlHttp=null;
				  //不同的浏览器获取对象xmlhttprequest 对象方法不一样
				  try
				    {
				    // Firefox, Opera 8.0+, Safari
				    xmlHttp=new XMLHttpRequest();
				    }
				  catch (e)
				    {
				    // Internet Explorer
				    try
				      {
				      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				      }
				    catch (e)
				      {
				      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				      }
				    }
				  return xmlHttp;
				}
				
				var myXmlHttpRequest="";
				
				function getCities(){
					
					myXmlHttpRequest=getXmlHttpObject();
					
					if(myXmlHttpRequest){
						
						var url="/ajax/cityprocess.php";//post方式
						var data1="province="+$('sheng').value;
						
						myXmlHttpRequest.open("post",url,true);//异步方式
						//必须加的一句话
						myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
						
						//指定回调函数
						myXmlHttpRequest.onreadystatechange=chuli;
						
						//发送
						myXmlHttpRequest.send(data1);
						
					}
					
				}
				
				function chuli(){
					
					if(myXmlHttpRequest.readyState==4){
						
						if(myXmlHttpRequest.status==200){
						
							//取出服务器返回的数据
							var cities=myXmlHttpRequest.responseXML.getElementsByTagName('city');
							
							$('city').length=1;//这个得写上
							
							//遍历并去除城市
							for(var i=0;i<cities.length;i++){
								
								var city_name=cities[i].childNodes[0].nodeValue;
								//window.alert(city_name);
								//创建新的option
								var myOption=document.createElement("option");
								myOption.value=city_name;
								myOption.innerText=city_name;
								//添加到下拉框
								$('city').appendChild(myOption);
							}
							
						}
						
					}
					
				}
				
				//封装一个方法
				function $(id){
					return document.getElementById(id);
				}
	
</script>
<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="country">
	<option value="">县城</option>	
</select>
</body>	
</html>

<?php 
//告诉浏览器使用utf8编码 保存时必须为无bom
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);
$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;
?>