ajax实战篇---城市select联动----XML交互
【摘要】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>城市联动效果</title> <meta http-equiv="pragma" c...
-
<!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.blog.csdn.net，作者：孙中明，版权归原作者所有，如需转载，请联系作者。
原文链接：hiszm.blog.csdn.net/article/details/72793580
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）