您的位置：首页 > 其它

Ajax实现省市县三级联动

2012-03-01 20:13 656 查看

include/dbconn.php

<?php

//建立数据库的连接

mysql_connect("localhost","root","qwe");

//选择数据库

mysql_select_db("product");

//设置连接数据库的编码方式

mysql_query("set names utf8");

?>

ajaxUtil.js

function get(url1,params,methodName){

//初始化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-area-select-server.php

<?php

header("Content-Type:text/html;charset=utf-8");

//包含数据库连接文件

include_once "include/dbconn.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代码

while($rows=mysql_fetch_assoc($rs)){

$opstr.="<option value='".$rows['id']."'>".$rows['name']."</option>";

}

echo $opstr;

?>

ajax-area-select.html

<!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=gb2312" />

<title>省市县三级联动</title>

<style type="text/css">

</style>

</head>

<script language="javascript" type="text/javascript" src="ajaxUtil.js">

</script>

<script type="text/javascript" language="javascript">

var objectId="";

function getArea(id,objid){

objectId=objid;

//定义url

var url="ajax-area-select-server.php";

//定义参数

var params="id="+id;

//调用ajax进行交互

get(url,params,processData);

}

// 处理服务器端返回的数据并显示

function processData(xhr){

//获取省的下来菜单的对象

$$(objectId).innerHTML=xhr.responseText;

//得到交互的数据并显示处理

}

</script>

</head>

<body onload="getArea('','sheng')">

<div style="border:#0F0 dashed 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>

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

标签：

相关文章推荐

新的分享

章节导航