两种方式实现省市县三级联动(利用解析文本和json方式)

 

第一种:

ajax-text-select.html

解析文本实现多级联动效果

 

解析文本实现多级联动效果

第二种:

Json-area.html

json实现多级联动效果

 

json文本实现多级联动效果

ajax-json-select-server.php

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

include_once "../../include/dbConn.php";

 

$id=$_GET['id'];

$sql="select id,name from area where id like '".$id."__'";

$rs=mysql_query($sql);

//要封装的格式

 

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

         $arr[]=$rows;

       }

 

  echo json_encode($arr);

?>

 

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);
}

 

你可能感兴趣的:(代码再现)