Ajax實現的城市二級聯動二

標籤：class   for   onload   element   onchange   pts   load   htm   remove   

上一篇聯動一種只是城市用ajax請求擷取並渲染，這裡將省份也用ajax請求並渲染

1、HTML

<select id="province">    <option>請選擇</option>  </select>  <select id="city">    <option>請選擇</option>  </select>

2、JS

/*     * 省份資訊和城市資訊全部來源於伺服器端     * * 第一種思路 - 基於前一個案例     *   * 擷取省份資訊,使用一次Ajax的非同步請求     *   * 根據省份資訊,再次使用Ajax的非同步請求     * * 第二種思路 - 重新思考     *   * 一次性將省份和城市擷取     */    // a. 建立XMLHttpRequest對象    var xhr = getXhr();    // 第一種思路 - 基於前一個案例    // 1. 當頁面載入時,實現Ajax的非同步請求 - 省份資訊    window.onload = function(){        // b. 建立串連 - open("get","07_province.php");        xhr.open("get","07_province.php");        // c. 發送請求 - send(null)        xhr.send(null);        // d. 接收伺服器端的資料        xhr.onreadystatechange = function(){            if(xhr.readyState==4&&xhr.status==200){                var data = xhr.responseText;                // 將字串轉換為數組                var provinces = data.split(",");                // 遍曆數組                for(var i=0;i<provinces.length;i++){                    // 建立option元素添加到id為province元素上                    var option = document.createElement("option");                    var text = document.createTextNode(provinces[i]);                    option.appendChild(text);                    var province = document.getElementById("province");                    province.appendChild(option);                }            }        }    };    // 2. 當使用者選擇省份資訊時,實現Ajax的非同步請求 - 城市資訊    var province = document.getElementById("province");    province.onchange = function(){        // 清空        var city = document.getElementById("city");        var opts = city.getElementsByTagName("option");        for(var z=opts.length-1;z>0;z--){            city.removeChild(opts[z]);        }        if(province.value != "請選擇"){            xhr.open("post","07_cities.php");            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");            xhr.send("province="+province.value);            xhr.onreadystatechange = function(){                if(xhr.readyState==4&&xhr.status==200){                    var data = xhr.responseText;                    var cities = data.split(",");                    for(var i=0;i<cities.length;i++){                        var option = document.createElement("option");                        var text = document.createTextNode(cities[i]);                        option.appendChild(text);                        city.appendChild(option);                    }                }            }        }            };    //定義擷取Ajax核心對象的函數    function getXhr(){        var xhr = null;        if(window.XMLHttpRequest){            xhr = new XMLHttpRequest();        }else{            xhr = new ActiveXObject("Microsoft.XMLHttp");        }        return xhr;    }

3、province.php

<?php    echo ‘山東省,遼寧省,吉林省‘;?>

cities.pnp

<?php    // 用於處理用戶端請求二級聯動的資料    // 1. 接收用戶端發送的省份資訊    $province = $_POST[‘province‘];    // 2. 判斷當前的省份資訊,提供不同的城市資訊    switch ($province){        case ‘山東省‘:            echo ‘青島市,濟南市,威海市,日照市,德州市‘;            break;        case ‘遼寧省‘:            echo ‘瀋陽市,大連市,鐵嶺市,丹東市,錦州市‘;            break;        case ‘吉林省‘:            echo ‘長春市,松原市,吉林市,通化市,四平市‘;            break;    }    // 伺服器端響應的是字串?>

 

Ajax實現的城市二級聯動二