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;

?>

 

posted @ 2018-10-19 19:42  寒潭渡鹤影  阅读(866)  评论(0)    收藏  举报