ajax省市县三级联动

最新推荐文章于 2024-07-25 12:46:10 发布

Sword_A

最新推荐文章于 2024-07-25 12:46:10 发布

阅读量4.8k

点赞数

文章标签： ajax xmlhttprequest function 引擎 url 服务器

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7317179

版权

<!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 οnlοad="getArea('','sheng')">
<div style="border:1px dashed #09F 1px;">
<select id="sheng" οnchange="getArea(this.value,'shi')"></select>省
<select id="shi" οnchange="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;
		
?>

Sword_A

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
ajax省市县三级联动

ajax省市县三级联动省市县 var objectId=""; function getArea(id,objid){ objectId=objid; //定义url var url="ajax-link-server.php"; //定义参数 var params="id="+id; get(url,par
复制链接

扫一扫