AJAX实现省市联动
来源:互联网 发布:mac foxmail邮箱登陆 编辑:程序博客网 时间:2024/04/30 09:25
AJAX实现省市联动
用AJAX来实现一些经典的功能,对于学习它是非常有帮助的,下面通过经典的省市联动功能来感受AJAX无刷新技术带来的魅力。
l 前台页面代码showCities.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>省市联动</title>
<scripttype="text/javascript">
//创建ajax引擎
functiongetXmlHttpObject(){
varxmlHttpRequest;
//不同的浏览器获取对象xmlhttprequest 对象方法不一样
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpRequest=newXMLHttpRequest();
}
returnxmlHttpRequest;
}
varmyXmlHttpRequest="";
functiongetCities(){
myXmlHttpRequest=getXmlHttpObject();
if(myXmlHttpRequest){
varurl="showCitiesPro.php";//post
vardata="province="+$('sheng').value;
myXmlHttpRequest.open("post",url,true);//异步方式
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数
myXmlHttpRequest.onreadystatechange=chuli;
//发送
myXmlHttpRequest.send(data);
}
}
functionchuli(){
if(myXmlHttpRequest.readyState==4){
if(myXmlHttpRequest.status==200){
//取出服务器回送的数据
varcities=myXmlHttpRequest.responseXML.getElementsByTagName("city");
//window.alert(cities.length);
//清零,避免了无刷新儿重复叠加
$('city').length=0;
varmyOption=document.createElement("option");
myOption.innerText="--城市--";
//添加到
$('city').appendChild(myOption);
//遍历并取出城市
for(vari=0;i<cities.length;i++){
varcity_name=cities[i].childNodes[0].nodeValue;
//创建新的元素option
varmyOption=document.createElement("option");
myOption.value=city_name;
myOption.innerText=city_name;
//添加到
$('city').appendChild(myOption);
}
}
}
}
//这里我们写一个函数
function$(id){
returndocument.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>
l 后台php处理代码showCitiesPro.php
<?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."\r\n",FILE_APPEND);
//到数据库去查询省有那些城市(现在先不到数据库)
$info="";
if($province=="zhejiang"){
$info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";
}elseif($province=="jiangsu"){
$info="<province><city>南京</city><city>徐州</city><city>苏州</city></province>";
}
echo$info;
?>
上面的例子中用了“先死后活法”的手段,在实际中我们需要从数据库中读取数据,并组织成字符串的形式,然后由后台传给前台,让前台实现动态展示。
- AJAX实现省市联动
- AJAX实现省市联动
- Ajax联动实现省市联动
- ajax实现省市三级联动
- Ajax实现省市二级联动
- 用ajax实现省市联动
- Ajax + Struts 实现省市联动详解
- Ajax + Struts 实现省市联动详解
- Ajax实现省市三级联动V1.0
- Ajax实现省市三级联动V1.1
- Ajax实现省市二级联动(源代码)
- AJAX实现简单的省市二级联动
- ajax与json实现省市二级联动
- Ajax实现省市县三级联动
- ajax实现无刷新省市联动
- 在mvc中用ajax实现省市联动
- ajax实现省市联动(version 1)
- jquery ajax实现省市二级联动
- Shell终端下,让svn diff支持颜色高亮
- Delphi 数据类型列表
- ZOJ 2760--How Many Shortest Path【dinic最大流 && 最短路构图 && 求最短路径的条数】
- 给刚玩Hadoop的朋友一些建议
- php ob系列函数中常用函数小结
- AJAX实现省市联动
- 自定义圆形的ProgressBar
- android 集合架构二-list
- swift开发笔记1-设置顶部导航条背景色和字体颜色
- 32位和64位系统区别及int字节数
- 黑马程序员———C语言———【一维数组】
- 设计模式的分类和六大原则
- Html animation by css(Sequence Js Tutorial)
- 利用switch语句计算特定的年份的月份共有几天。