ajax省市县三级联动

来源：互联网发布：java daemon 编辑：程序博客网时间：2024/04/28 21:43

<!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;//定义urlvar 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){            //动态调用方法，为什么说是动态呢？方法的名称是个变量methodNamemethodName(xhr);  }    }}//$（）方法用于方便取出 id="id" 的对象function $(id){return document.getElementById(id);}

ajax-link-server.php

<?phpheader("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;?>