现在的位置: 首页 > 综合 > 正文

php+ajax+mysql三级联动

2018年05月21日 ⁄ 综合 ⁄ 共 2485字 ⁄ 字号 评论关闭
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SanJiLianDong</title>
<script type="text/javascript" language="javascript" src="task7.js">
</script>
</head>
<body>
	
	<select name='pro' id='pro' onchange='query(this.value,1)' >
	<option value='-1'>---请选择省份---</option>
	<?php 
		include "conn.php";
		$query=mysql_query("select * from province");
		while($result=mysql_fetch_array($query)){
			echo "<option value='".$result['code']."'>";
			echo $result['name'];
			echo "</option>";
		}
	?>	
	</select>
	
	<select name='city' id='city' onchange='query(this.value,2)'>
	<option value='-1'>---请选择城市---</option>
	</select>
	
	<select name='district' id='district'>
	<option value='-1'>---请选择地区---</option>
	</select>
</body>
</html>

	/**
 	 * ajax实例化
	 */
	function createXMLRequest()
	{
		var ajax;
		if(window.XMLHttpRequest) { //Mozilla 浏览器
            ajax = new XMLHttpRequest();
            if (ajax.overrideMimeType) {//设置MiME类别
                    ajax.overrideMimeType("text/xml");
            }
   	 	}
    	else if (window.ActiveXObject) { // IE浏览器
            	try {
                    ajax = new ActiveXObject("Msxml2.XMLHTTP");
            	} catch (e) {
                    try {
                            ajax = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
            	}
   	 	}
    	if (!ajax) { // 异常,创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例.");
            return false;
    	}
    	return ajax;
	}
	
	/**
	 *查询
	 *@param value:(下拉菜单的value值,即省份或者城市等的编码code,varchar)  type:1 or 2(查找类型,int)
	 */
	function query(value,type)
	{	
		//var strUrl = window.location.href;
		//var arrUrl = strUrl.split("/");
		//var strPage = arrUrl[arrUrl.length-1];
		//alert(strPage);
		//+"&from="+strPage
		if(type == 1){
			document.getElementById("district").length = 1;
		}
		
		var ajax = createXMLRequest();
		var poststr = "type="+type+"&code="+value;
		var url = "sql.php";
		ajax.open('POST',url,true);
		ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		ajax.send(poststr);
		ajax.onreadystatechange = function(){
			if(ajax.readyState==4 && ajax.status==200){
				handleState(ajax.responseText,type);
			}
		}
	}
	
	/**
	 *处理ajax返回值
	 *@param str:ajax.responseText(ajax返回值,string)   type:1 or 2(查找类型,int)
	 */
	function handleState(str,type)
	{

		var arr = new Array();
		var value;
		var name = new Array();
		var code = new Array();
		
		arr = str.split("|");

		
		if(type == 1){
			document.getElementById('city').length = 0;  
			document.getElementById("city").options[0] = new Option('---请选择城市---','-1');   
	        for(var i=0;i<Math.ceil(arr.length/2)-1;i++){
	    		value = arr[2*i+1];
	    		AreaText = arr[2*i];
	     		document.getElementById("city").options[i+1] = new Option(AreaText,value);
				
	        }	
		}else if(type == 2){
			document.getElementById('district').length = 0;
			document.getElementById("district").options[0] = new Option('---请选择地区---','-1');
			for(var i=0;i<Math.ceil(arr.length/2)-1;i++){
	    		value = arr[2*i+1];
	    		AreaText = arr[2*i];
	     		document.getElementById("district").options[i+1] = new Option(AreaText,value);
	        }	
		}

	}

抱歉!评论已关闭.