省市联动 ajax代码,Js代码库,德仔网

代码语言
代码分类
【Js】省市联动 ajax
作者:筱雨 / 发布于2016/11/10/ 801
<html>  
<head>  
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>  
<title>省市联动</title>   
</head>  
<script language="javascript" type="text/javascript">  
    //创建ajax引擎  
            function getXmlHttpObject()  
                {  
                  var xmlHttp=null;  
                  //不同的浏览器获取对象xmlhttprequest 对象方法不一样  
                  try  
                    {  
                    // Firefox, Opera 8.0+, Safari  
                    xmlHttp=new XMLHttpRequest();  
                    }  
                  catch (e)  
                    {  
                    // Internet Explorer  
                    try  
                      {  
                      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  
                      }  
                    catch (e)  
                      {  
                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  
                      }  
                    }  
                  return xmlHttp;  
                }  
                  
                var myXmlHttpRequest="";  
                  
                function getCities(){  
                      
                    myXmlHttpRequest=getXmlHttpObject();  
                      
                    if(myXmlHttpRequest){  
                          
                        var url="/ajax/cityprocess.php";//post方式  
                        var data1="province="+$('sheng').value;  
                          
                        myXmlHttpRequest.open("post",url,true);//异步方式  
                        //必须加的一句话  
                        myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  
                          
                        //指定回调函数  
                        myXmlHttpRequest.onreadystatechange=chuli;  
                          
                        //发送  
                        myXmlHttpRequest.send(data1);  
                          
                    }  
                      
                }  
                  
                function chuli(){  
                      
                    if(myXmlHttpRequest.readyState==4){  
                          
                        if(myXmlHttpRequest.status==200){  
                          
                            //取出服务器返回的数据  
                            var cities=myXmlHttpRequest.responseXML.getElementsByTagName('city');  
                              
                            $('city').length=1;//这个得写上  
                              
                            //遍历并去除城市  
                            for(var i=0;i<cities.length;i++){  
                                  
                                var city_name=cities[i].childNodes[0].nodeValue;  
                                //window.alert(city_name);  
                                //创建新的option  
                                var myOption=document.createElement("option");  
                                myOption.value=city_name;  
                                myOption.innerText=city_name;  
                                //添加到下拉框  
                                $('city').appendChild(myOption);  
                            }  
                              
                        }  
                          
                    }  
                      
                }  
                  
                //封装一个方法  
                function $(id){  
                    return document.getElementById(id);  
                }  
      
</script>  
<body>  
<select id="sheng" onchange="getCities();">  
    <option value="">---省---</option>     
    <option value="zhejiang">浙江</option>  
    <option value="jiangsu">江苏</option>  
</select>   
  
<select id="city">  
    <option value="">---城市---</option>    
</select>  
  
<select id="country">  
    <option value="">县城</option>      
</select>  
</body>     
</html>  


<?php   
//告诉浏览器使用utf8编码 保存时必须为无bom  
header("Content-Type: text/xml;charset=utf-8");  
//告诉浏览器不使用缓存  
header("Cache-Control:no-cache");  
//接收用户的选择的省份的名字  
$province=$_POST['province'];  
//在调试过程中，看到接收的数据的方法  
//file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);  
$info="";  
if($province=="zhejiang"){  
      
    $info="<province><city>杭州</city><city>温州</city><city>宁波</city></province>";  
}else if($province=="jiangsu"){  
      
    $info="<province><city>南京</city><city>苏州</city><city>无锡</city></province>";  
}  
  
echo $info;  
?>
试试其它关键字
同语言下
可能有用的
筱雨贡献的其它代码(28)