ajax實現城市聯動效果

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

還剩餘部分未寫完，後面的可以自行完成。未進行資料庫連接，有需要的自行串連資料庫的操作。

參考代碼：

showCity.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>      <title>城市聯動效果</title>        <meta http-equiv="content-type" content="text/html;charset=utf-8">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->    <script type="text/javascript">        //建立ajax引擎    function getXMLHttpRequest(){        var xmlHttp;        if(window.ActiveXObject){            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            //window.alert("IE");        }else{            xmlHttp=new XMLHttpRequest();        }        return xmlHttp;    }        //sendRequest    var xmlHttpRequest;    function sendRequest(){        //得到xmlHttpRequest 對象        xmlHttpRequest=getXMLHttpRequest();        var url="/ajax/cityList.php";        var data="province="+$('sheng').value;        //window.alert(data);        xmlHttpRequest.open("post",url,true);        //post方式提交需要加入這句        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        //回呼函數        xmlHttpRequest.onreadystatechange=function chuli(){                        if(xmlHttpRequest.readyState==4){                if(xmlHttpRequest.status=="200"){                    //取出結果                    var citys=xmlHttpRequest.responseXML.getElementsByTagName("city");                    $('city').length=0;                    var myoption=document.createElement("option");                    myoption.innerText="--城市--";                    $('city').appendChild(myoption);                    //window.alert(citys.length);                    //遍曆                    for(var i=0;i<citys.length;i++){                        //window.alert(citys[i].childNodes[0].nodeValue);                        var city_name=citys[i].childNodes[0].nodeValue;                        //建立新元素                        var myoption=document.createElement("option");                        myoption.value=city_name;                        myoption.innerText=city_name;                        $("city").appendChild(myoption);                    }                }            }        }        //發送資料        xmlHttpRequest.send(data);    }    function $(id){        return document.getElementById(id);    }    </script>  </head>    <body>    <select id="sheng" onchange="sendRequest();">    <option value="">---省---</option>    <option value="hunan">湖南</option>    <option value="jiangsu" >江蘇</option>    </select>    <select id="city">    <option value="">--城市--</option>    </select>     <select id="county">    <option value="">--縣城--</option>    </select>  </body></html>

cityList.php

<?php        //這裡兩句話很重要,第一講話告訴瀏覽器返回的資料是xml格式    header("Content-Type: text/xml;charset=utf-8");    //告訴瀏覽器不要快取資料    header("Cache-Control: no-cache");    //接收    $province=$_POST['province'];    //調試    file_put_contents("d:/mylog.log",$province."\r\n",FILE_APPEND);    $result="";    if($province=="hunan"){        $result="<province><city>長沙</city><city>嶽陽</city><city>衡陽</city></province>";            }else if($province=="jiangsu"){        $result="<province><city>南京</city><city>鹽城</city><city>蘇州</city></province>";    }        echo $result;?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More