ajax级联

前端之家收集整理的这篇文章主要介绍了ajax级联前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习的

Request.js

var net = new Object();
//全局变量net
//构造函数
net.AjaxRequest=function (url,onload,onerror,method,params){
	//alert("Ajax:"+url);
	this.req=null;
	this.onload=onload;
	this.onerror=(onerror)?onerror:this.defaultError;
	this.loadDate(url,params);
}
net.AjaxRequest.prototype.loadDate=function(url,params){
	if(!method){method="GET";}
	if(window.XMLHttpRequest) {
		//针对FireFox,Mozillar,Opera,Safari,IE7,IE8
		// 非IE浏览器
        this.req = new XMLHttpRequest();	                      //创建XMLHttpRequest对象
    } else if(window.ActiveXObject) {
    	  //针对IE6,IE5.5,IE5
    	// IE浏览器      
        	this.req = new ActiveXObject("Microsoft.XMLHTTP");	
        	//创建XMLHttpRequest对象      
        	
        }
    if (this.req) {
       try{
    	   var loader=this;
    	   this.req.onreadystatechange=function(){
    	   net.AjaxRequest.onReadyState.call(loader);
    	   }
    	   this.req.open(method,url,true);
    	   if(method=="POST"){
    		   this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    	   }
    	   this.req.send(params);
       }catch(err){
    	   this.onerror.call(this);
       }
    }
}
net.AjaxRequest.onReadyState=function(){
	var req=this.req;
	var ready=req.readyState;
	if(ready==4){
		if(req.status==200){
			this.onload.call(this);
		}else {
			this.onerror.call(this);
		}
	}
}
net.AjaxRequest.prototype.defaultError=function(){
	alert("错误数据\n\n回调状态:"+this.req.readyState+"\n状态:"+this.req.status);
}

ajax.js
function getProvince(){
	var loader;
	//alert("loader;");
	loader=new net.AjaxRequest("../Area?action=getProvince&nocache="+new Date().getTime(),deal_getProvince,"GET");
 }
function deal_getProvince(){
	areaArr=this.req.responseText.split(",");
	//alert("areaArr");	
	for(i=0;i<areaArr.length;i++){
		document.getElementById("province").options[i]=new Option(areaArr[i],areaArr[i]);
	}
	if(areaArr[0]!=""){		
		getCity(areaArr[0]);
		//getCity(document.getElementById("province").options[0].value);
		//alert("areaArr");
	}
}


function getCity(province){
	var loader;
	loader=new net.AjaxRequest("../Area?action=getCity&province="+encodeURIComponent(province)+"&nocache="+new Date().getTime(),deal_getCity,"GET");
 }
function deal_getCity(){
	areaArr=this.req.responseText.split(",");
	document.getElementById("city").length=0;
        //$('#city').empty();
       document.getElementById("city").options[0]=new Option("请选择","请选择");
	for(i=1;i<areaArr.length+1;i++){
		document.getElementById("city").options[i]=new Option(areaArr[i-1],areaArr[i-1]);
	}
	getCountry(document.getElementById("city").options[0].value);
	//if(areaArr[0]!=""){		
		//getCountry(areaArr[0]);
		//alert(areaArr[0]);
	//}
}

function getCountry(city){
	//alert("getPerson(area)");
	var p=document.getElementById("province");
	var loader=new net.AjaxRequest("../Area?action=getCountry&province="+encodeURIComponent(p.value)+"&city="+encodeURIComponent(city)+"&nocache="+new Date().getTime(),deal_getCountry,"GET");
	
}

function deal_getCountry(){	
	areaArr=this.req.responseText.split(",");
	//alert(this.req.responseText);
	document.getElementById("country1").length=0;
	//if(areaArr[0].equals("请选择"))	
	document.getElementById("country1").options[0]=new Option("请选择","请选择");
	for(i1=1;i1<areaArr.length+1;i1++){
		document.getElementById("country1").options[i1]=new Option(areaArr[i1-1],areaArr[i1-1]);
	}
}
function onerror(){}
index.jsp
<script src="js/AjaxRequest.js"></script>
	<script src="js/ajax.js"></script>
	<script type="text/javascript">
    window.onload= function(){       
    getProvince();
    }
    </script >

<select name="province" id="province" onchange="getCity(this.value)"></select>
								
<select name="city" id="city" onchange="getCountry(this.value)"></select>
								
<select name="country1" id="country1"></select>
原文链接:https://www.f2er.com/ajax/163712.html

猜你在找的Ajax相关文章