ajax实战篇---城市select联动----XML交互
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>城市联动效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
<!--
//第一步---------------------创建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");//这个是ie内核
}else{
xmlHttpRequest=new XMLHttpRequest();//非ie内核
}
return xmlHttpRequest;//将创建创建的ajax引擎实例化
}
var myXmlHttpRequest="";//设置全局变量 为了后面的chuli 函数需要取得属性
//第二步---------------------获取数据并发送服务器
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);
}
}
//第四步------------------------------------------------对返回的数据进行处理处理函数
function chuli(){
//成功返回
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");//这里获取xml的标签 切记注意大小写
$('city').length=0;
for(var i=0;i<cities.length;i++){
var city_val=cities[i].childNodes[0].nodeValue;
//创建optiion
var myOption=document.createElement("option");
myOption.value=city_val;
myOption.innerText=city_val;
$('city').appendChild(myOption);
}
}
}
}
function $(id){
return document.getElementById(id);
}
-->
</script>
</head>
<body>
<select id="sheng" οnchange="sendRequest();">
<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>
<?php
//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
header("Content-Type: text/xml;charset=utf-8");
//告诉浏览器不要缓存数据
header("Cache-Control: no-cache");
//获取用户提交城市名
$province=$_POST['provice'];
//第三步-------------------------------------准备返回xml格式的结果..
$result="";
if($province=="zhejiang"){
$result="<states><city>绍兴</city><city>杭州</city><city>温州</city><city>义乌</city></states>";
}else if($province=="jiangsu"){
$result="<states><city>南京</city><city>盐城</city><city>苏州</city></states>";
}
echo $result;
?>
🐳 作者:hiszm 📢 版权:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,万分感谢。 💬 留言:同时 , 如果文中有什么错误,欢迎指出。以免更多的人被误导。 |
![]() |