4. AJAX 省市联动

来源：互联网发布：python __contains__ 编辑：程序博客网时间：2024/04/30 13:02

这里写图片描述

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<?phpheader('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;

0 0