ajax经典案例--省市联动

ajax的省市联动案例

ajax经典案例--省市联动

如果我们的代码比较复杂，可以通过file_put_contents来输出信息到某个日志。

在一个元素中添加另一个元素使用的方法是：appendChild()。

函数appendChild()写错是有问题的。不要写错appendChlid()了。

showCities.php

<html>

<head>

<meta http-equiv="content-type"content="text/html;charset=utf-8"/>

<script language="javascript" type="text/javascript">

    //创建ajax引擎

    function getXmlHttpObject(){

        var xmlHttpRequest;

        if(window.ActiveObject){

            xmlHttpRequest=new ActiveObject("Microsoft.XMLHTTP");

        }else{

            xmlHttpRequest=new XMLHttpRequest();

        }

        return xmlHttpRequest;

    }

    var myXmlHttpRequest="";

    function getCities(){

        myXmlHttpRequest=getXmlHttpObject();

        if(myXmlHttpRequest){

            var url="/showCitiesPro.php";//post方式提交

            var data="province="+$("sheng").value;

            myXmlHttpRequest.open("post",url,true);//异步方式

            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            //指定回调函数

            myXmlHttpRequest.onreadystatechange=chuli;

            //发送

            myXmlHttpRequest.send(data);

        }

    }

    function chuli(){

        if(myXmlHttpRequest.readyState==4){

            if(myXmlHttpRequest.status==200){

                //取出服务器回送的数据

                var cities=myXmlHttpRequest.responseXML.getElementsByTagName("city");

                //解决方案是添加如下代码

                $("city").length=0;

                //犯错：$("city").length=0;写出$("city").lenth=0;

                var myOption=document.createElement("option");

                myOption.innerText="--城市--";

                //添加到

                $("city").appendChild(myOption);

                //解决方案

                //遍历并取出城市

                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);

                    //在一个元素中添加另一个元素使用appendChild()；

                }

            }

        }

    }

    function $(id){

        return document.getElementById(id);

    }

</script>

</head>

<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="county">

    <option value="">--县城--</option>

    </select>

</select>

</body>

</html>

showCitiesPro.php

<?php

    //服务器端

    //这里两句话很重要，第一句话告诉浏览器返回的数据是xml格式

    header("content-Type:text/xml;charset=utf-8");

    //告诉浏览器不要缓存数据

    header("Cache-Control:no-cache");

    //接收用户的选择的省的名字

    $province=$_POST['province'];

    //ajax调试很困难

    //如何在调试过程中，看到接收到的数据。

    file_put_contents("D:/install/wamp/www/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;

?>

秒客网

ajax经典案例--省市联动

相关文章