ajax三级联动

最新推荐文章于 2022-03-04 19:30:58 发布

sweetllh

最新推荐文章于 2022-03-04 19:30:58 发布

阅读量339

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/sweetllh/article/details/73744157

ajax 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script type="text/javascript">
            window.onload=function(){
                function $(id) {
                    return document.getElementById(id);
                }

                function getXHR() {
                    //1、创建ajax引擎
                    var oAjax;
                    if(window.XMLHttpRequest) {
                        oAjax = new XMLHttpRequest();
                    } else {
                        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
                    }

                    return oAjax;
                }

                $('sheng').onchange=function(){
                    var oAjax=getXHR();

                    if(oAjax){
                        var url='/citylist.php?time='+new Date+'&name='+$('sheng').value;
                        oAjax.open('GET', url, true);
                        oAjax.send(null);

                        oAjax.onreadystatechange=function(){
                            //alert('现在的状态'+oAjax.readyState);
                            if(oAjax.readyState==4){
                                if(oAjax.status==200){
                                    var arr=eval(oAjax.responseText);
                                    //alert(arr.length);

                                    $('city').length=0;
                                    var oPtion=document.createElement('option');
                                    oPtion.innerHTML='--城市--';
                                    $('city').appendChild(oPtion);
                                    for(var i=0;i<arr.length;i++){
                                        var oPtion=document.createElement('option');
                                        oPtion.innerHTML=arr[i].city;

                                        $('city').appendChild(oPtion);
                                    }
                                }
                                //alert(oAjax.responseText);
                                //$('inf').innerHTML=oAjax.responseText;
                            }
                        }

                    }
                }


            }
        </script>
    </head>
    <body>
        <form action="" method="post">
            <select id="sheng">
                <option value="s">--省份--</option>
                <option value="gx">广西</option>
                <option value="gd">广东</option>
            </select>
            <select id="city">
                <option value="">--城市--</option>

            </select>
            <select id="xian">
                <option value="">--县城--</option>

            </select>
        </form>
    </body>
</html>

三级联动处理函数：citylist.php

<?php
    //这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式
    header("Content-Type: text/text;charset=utf-8");
    //告诉浏览器不要缓存数据
    header("Cache-Control: no-cache");

    $sheng=$_GET['name'];

    file_put_contents("d:/mylog.log",$sheng."\r\n",FILE_APPEND);

    if($sheng=='gx'){
        echo '[{"city":"南宁"},{"city":"桂林"},{"city":"柳州"}]';
    }
    else if($sheng=='gd'){
        echo '[{"city":"广州"},{"city":"东莞"},{"city":"佛山"}]';
    }

?>