您的位置：首页 > 编程语言 > PHP开发
用php+mysql+json+js+ajax实现省市县三级联动

2012-03-07 15:44 976 查看
很好用的代码额这里包含了ajax插件可以直接用

//php页面  area.php

<?php
include_once "conn.php";
//获取客户端传来的数据
$id=$_GET["id"];
//查询sql
$sql="select id,name from area where id like '".$id."__'";
$res=mysql_query($sql);

//遍历查询结果
while($rows=mysql_fetch_assoc($res)){
$arr[]=$rows;
}
echo json_encode($arr);
?>
//html页面Ajaxphpsan2.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=utf-8" />
<title>三级联动</title>
<script language="javascript" type="text/javascript" src="util.js"></script>
<script type="text/javascript" language="javascript">
var objectId="";
//定义函数，获取数据库的省份数据
function getArea(id,objId){
objectId=objId;
//定义url
var url="area2.php";
//定义参数
var params="id="+id;
//调用ajax进行交互
get(params,url,proccesData);
}
//处理服务器端返回的数据库，并显示
function proccesData(xhr){
//获取json对象
var json_objs=xhr.responseText;

//解析表达式
var arr = eval("("+json_objs+")");
//根据数组arr获取值
for(var i=0;i<arr.length;i++){
//创建option节点
var option=document.createElement("option");
//获取name值
var text=arr[i].name;
//获取id值
var value=arr[i].id;
//创建文本节点
var text1=document.createTextNode(text);
//将value值写入option属性value中
option.setAttribute("value",value);
//将文本节点追加到option中
option.appendChild(text1);
//追加到相应select中
document.getElementById(objectId).appendChild(option);
}
}
</script>
</head>
<body onload="getArea('','sheng')">
<form>
<select id="sheng" onchange="getArea(this.value,'shi')">
</select>省
<select id="shi" onchange="getArea(this.value,'xian')">
</select>市
<select id="xian">
</select>县
</form>
</body>
</html>

//Aja插件

function get(parms,url1,mName){
/*
ajax无刷新的评论技术
1、发布的评论，无刷新技术显示到下面的区域
2、通过ajax把内容存到服务器上
3、获取服务器的数据，显示评论区域

Ajax使用的基本步骤
1、初始化ajax引擎
2、封装url
3、打开ajax引擎（同步、异步的方式；   本次传输使用get还是post）
4、将要请求的信息发送到服务器进行处理
5、监听服务器返回给ajax引擎的处理状态
6、判断是否交互完毕，如果交互完毕取   出返回的数据    */
var xhr=new XMLHttpRequest();
//这种方式只针对ie浏览器，并且ie6以下不行
//初始化urs
var url=url1+"?"+parms+"&r="+Math.random();
//alert(url);
//打开引擎
xhr.open("get",url,true);//readState 1
//发送请求
xhr.send(null);//readState 2
//监听readyStatechange值的改变，每次改变都会执行下面的函数
xhr.onreadystatechange=function (){
//如果等于4，表名交互完毕，我们可以取出服务器内容
if(xhr.readyState==4){
mName(xhr);
}
}
}
function $$(id){
return document.getElementById(id);

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航