Ajax:Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）,指前後端在不重新整理頁面的情況下交換資料，更新資料。

html程式碼：

             <select id="provinceId" onchange="cit()">            //當省級id值改變的時候觸發cit()函式
                <option selected="selected">省份</option>
            </select>
            <select id="cityId" onchange="rul()">
                <option selected="selected">城市</option>
            </select>
            <select id="districtId">
                <option selected="selected">區縣</option>
            </select>
 

js程式碼：(省級獲取)

$.ajax({
        type: "post",//請求方式post/get(預設情況下為get)
        url: "http://bf.corefuture.cn/bookfriend/place/getAllProvince", //傳送請求的地址
        dataType: "json",//獲取的資料型別
        success: function(data) {//請求成功之後的會掉函式
            var d=data.provinces;
            for(var i = 0; i < d.length; i++) {
                var proId = d[i].provinceId;//獲取到索引為i的省份的id
                var proName = d[i].provinceName;//獲取索引為i的省份名
                var opt = "<option value='" + proId + "'>" + proName + "</option>";
                $("#provinceId").append(opt);//將opt填充到select中

            }
        },
        error: function() {
            alert("系統異常，請稍後再試！")
        },
        xhrFields:{
            withCredentials:true    //跨域請求
        },
        crossDomain:true
    });
 

市級獲取：

$.ajax({
        type: "post",
        url: "http://bf.corefuture.cn/bookfriend/place/getCitiesByProvinceId", //獲取json資料
        dataType: "json",
        data:{
            "provinceId":prov
        },
        success: function(data) {
            var d=data.cities;
            $("#cityId:eq(0)").empty();//防止點選多次，多次填充下拉選單
            var citId = -1;
            var citName = "城市";
            var opt = "<option value='" + citId + "'>" + citName + "</option>";
            $("#cityId").append(opt);

            $("#districtId:eq(0)").empty();
            var disId = -1;
            var disName = "區縣";
            var opt1 = "<option value='" +disId + "'>" + disName + "</option>";
            $("#districtId").append(opt1);
            for(var i = 0; i < d.length; i++) {
                var citId = d[i].cityId;
                var citName = d[i].cityName;
                var opt = "<option value='" + citId + "'>" + citName + "</option>";
                $("#cityId").append(opt);
            }
        },
        error: function() {
            alert("系統異常，請稍後再試！")
        },
        xhrFields:{
            withCredentials:true
        },
        crossDomain:true
    });
 

function rul(){
        var city=$("#cityId").val();
        $.ajax({
            type: "post",
            url: "http://bf.corefuture.cn/bookfriend/place/getDistrictsByCityId", //獲取json資料
            dataType: "json",
            data:{
                "cityId":city
            },
            success: function(data) {
                var d=data.districts;
                $("#districtId:eq(0)").empty();
                var disId = -1;
                var disName = "區縣";
                var opt = "<option value='" +disId + "'>" + disName + "</option>";
                $("#districtId").append(opt);
                for(var i = 0; i < d.length; i++) {
                    var disId = d[i].districtId;
                    var disName = d[i].districtName;
                    var opt = "<option value='" +disId + "'>" + disName + "</option>";
                    $("#districtId").append(opt);
                }
            },
            error: function() {
                alert("系統異常，請稍後再試！")
            },
            xhrFields:{
                withCredentials:true
            },
            crossDomain:true
        });
    }