您的位置：首页 > 其它

ajax省市县三级联动

2012-03-04 09:16 246 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax省市县三级联动</title>

</head>
<body onload="getArea('','sheng')">
<div style="border:1px dashed #09F 1px;">
<select id="sheng" onchange="getArea(this.value,'shi')"></select>省
<select id="shi" onchange="getArea(this.value,'xian')"></select>市
<select id="xian">	</select>县
</div>
</body>
</html>

<script type="text/javascript" language="javascript" src="ajaxUtil.js"></script>
<script type="text/javascript" language="javascript">
var objectId="";
function getArea(id,objid){
objectId=objid;
//定义url
var url="ajax-link-server.php";

//定义参数
var params="id="+id;

get(url,params,processDate);

//调用ajax进行交互

//得到交互的数据并且显示
}

//处理服务器端返回的数据库，并且显示
function processDate(xhr){

//alert(xhr.responseText);
//获取省的下拉菜单的对象
//$(objectId).innerHTML=xhr.responseText;

//解析返回的数据
var arr=xhr.responseText.split(";");
var str="";
for(var i=0;i<arr.length-1;i++){

var arr2=arr[i].split(",");
//输出显示
//document.write("id: "+arr2[0]+" 名称："+arr2[1]+"<br>");

/*			var option=document.createElement("option");
option.setAttribute("value",arr2[0]);
var text=document.createTextNode(arr2[1]);
option.appendChild(text);
//$(objectId).appendChild(caption);
document.getElementById(objectId).appendChild(option);	*/

str=str+"<option value='"+arr2[0]+"'>"+arr2[1]+"</option>";
$(objectId).innerHTML=str;

}

}

</script>

ajaxUtil.js 文件

function get(url1,params,methodName){
/*
ajax使用的基本步骤：

1、初始化ajax引擎
2、封装url（设定要请求的路径）
3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
4、将要请求的信息通过引擎发送到服务器进行处理
5、监听服务器返回给ajax引擎的处理状态
6、判断是否交互完毕，如果交互完毕则取出返回的数
*/
//初始化ajax引擎
var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
var url=url1+"?"+params+"&r="+Math.random();

//alert(url);
//打开引擎
xhr.open("get",url,true);   //readyState=1

//发送请求
xhr.send(null);   //readyState=2

//监听readyState值的改变，每次改变都会执行下面额函数
xhr.onreadystatechange=function (){

//如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
if(xhr.readyState==4){

//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
methodName(xhr);

}

}

}

//$（）方法用于方便取出 id="id" 的对象
function $(id){

return document.getElementById(id);
}

ajax-link-server.php

<?php
header("Content-Type:text/html;charset=utf-8");
include_once "./include.php";
//获取客户端传来的数据
$id=$_GET['id'];
//定义sql
$sql="select id,name from area where id like '".$id."__'";
//查询
$rs=mysql_query($sql);
//$opstr="<option value='0'>请选择</option>";

//遍历查询结果,并且拼装html代码
$op="";
$op="0,==请选择==;";
while($rows=mysql_fetch_assoc($rs)){
//拼装下拉选项
//$opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";

$op.=$rows['id'].",".$rows['name'].";";

}

echo $op;

?>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航