4. AJAX 省市联动

最新推荐文章于 2023-07-09 18:52:27 发布

enlyhua

最新推荐文章于 2023-07-09 18:52:27 发布

阅读量586

点赞数

分类专栏： Ajax 文章标签： ajax 函数

本文链接：https://blog.youkuaiyun.com/enlyhua/article/details/50646838

版权

Ajax 专栏收录该内容

6 篇文章

订阅专栏

这里写图片描述

showCities.php

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

    <script type="text/javascript">

        function getXmlHttpObject()
        {
            if(window.XMLHttpRequest){
                var xmlHttpRequestObject = new XMLHttpRequest();
//                alert(xmlHttpRequestObject);
            }else{
                var xmlHttpRequestObject = new XMLHttpRequest();
//                alert('NO');
            }
            return xmlHttpRequestObject;
        }
        var myXmlHttpRequest = '';

        function getCities()
        {
            myXmlHttpRequest = getXmlHttpObject();
//            alert(myXmlHttpRequest);
            if(myXmlHttpRequest){
                var url = 'showCitiesPro.php';//post
                var data = 'province=' + $('sheng').value ;
//                alert(data);
                myXmlHttpRequest.open('post',url,true);
                myXmlHttpRequest.onreadystatechange = chuli;
                myXmlHttpRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                myXmlHttpRequest.send(data);
            }else{
                alert('出错了');
            }
        }

        function chuli()
        {
            if(myXmlHttpRequest.readyState == 4 && myXmlHttpRequest.status == 200){

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

                $('city').length = 0;
                var myOption = document.createElement('option');
                myOption.innerHTML = '----城市---';
                $('city').appendChild(myOption);
                //遍历取出城市
                for(var i=0;i<cities.length;i++){
                    var city_name = cities[i].childNodes[0].nodeValue;
                    //创建新的元素option
                    var myOption = document.createElement('option');
                    myOption.value = city_name;
                    myOption.innerHTML = city_name;

                    //添加到
                    $('city').appendChild(myOption);
                }

            }
        }

        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>
</body>
</html>

showCitiesPro.php

<?php

header('Content-Type:text/xml;charset=utf-8');
header('Cache-Control:no-cache');

//接收用户选择省的名字
$province = $_POST['province'];

//如何在调试过程中，看到接收到的数据
//写入文件
//到数据库取查询省有哪些城市(现在先不到数据库去)

$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>';
}


file_put_contents('mylog.txt',$info . '***********',FILE_APPEND);

echo $info;