ajax实现城市联动效果

Posted on 2013-05-28 14:24 Step at a time 阅读(367) 评论(0) 编辑收藏举报

还剩余部分未写完，后面的可以自行完成。未进行数据库连接，有需要的自行连接数据库的操作。

参考代码：

showCity.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  
    <title>城市联动效果</title>
    
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
    
    //创建ajax引擎
    function getXMLHttpRequest(){

        var xmlHttp;
        if(window.ActiveXObject){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            //window.alert("IE");
        }else{
            xmlHttp=new XMLHttpRequest();
        }

        return xmlHttp;
    }
    
    //sendRequest
    var xmlHttpRequest;
    function sendRequest(){
        //得到xmlHttpRequest 对象
        xmlHttpRequest=getXMLHttpRequest();
        var url="/ajax/cityList.php";
        var data="province="+$('sheng').value;
        //window.alert(data);
        xmlHttpRequest.open("post",url,true);
        //post方式提交需要加入这句
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        //回调函数
        xmlHttpRequest.onreadystatechange=function chuli(){
            
            if(xmlHttpRequest.readyState==4){
                if(xmlHttpRequest.status=="200"){
                    //取出结果
                    var citys=xmlHttpRequest.responseXML.getElementsByTagName("city");

                    $('city').length=0;
                    var myoption=document.createElement("option");
                    myoption.innerText="--城市--";
                    $('city').appendChild(myoption);

                    //window.alert(citys.length);
                    //遍历
                    for(var i=0;i<citys.length;i++){
                        //window.alert(citys[i].childNodes[0].nodeValue);
                        var city_name=citys[i].childNodes[0].nodeValue;
                        //创建新元素
                        var myoption=document.createElement("option");
                        myoption.value=city_name;
                        myoption.innerText=city_name;
                        $("city").appendChild(myoption);
                    }
                }
            }
        }
        //发送数据
        xmlHttpRequest.send(data);
    }

    function $(id){
        return document.getElementById(id);
    }
    </script>

  </head>
  
  <body>
    <select id="sheng" onchange="sendRequest();">
    <option value="">---省---</option>
    <option value="hunan">湖南</option>
    <option value="jiangsu" >江苏</option>
    </select>
    <select id="city">
    <option value="">--城市--</option>
    </select>
     <select id="county">
    <option value="">--县城--</option>
    </select>
  </body>
</html>

cityList.php

<?php
    
    //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
    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);

    $result="";
    if($province=="hunan"){
        $result="<province><city>长沙</city><city>岳阳</city><city>衡阳</city></province>";
        
    }else if($province=="jiangsu"){
        $result="<province><city>南京</city><city>盐城</city><city>苏州</city></province>";
    }
    
    echo $result;
?>

效果图

刷新页面返回顶部

pwm5712

公告

ajax实现城市联动效果