ajax级联

来源：互联网发布：linux yum ant 编辑：程序博客网时间：2024/05/17 01:14

学习的

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,method,params);}net.AjaxRequest.prototype.loadDate=function(url,method,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,onerror,"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,onerror,"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,onerror,"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>

0 0