ajax+jQuery实现级联显示地址的方法

下面就为您详细讲述“ajax+jQuery实现级联显示地址的方法”的完整攻略，包含以下步骤：

一、前置知识

1.了解ajax和jQuery的基本使用方法；

2.了解前端如何访问后端获取数据；

3.了解前端如何解析JSON数据。

二、技术实现

1. html结构设计

在页面中设3个下拉框，分别代表省市区，并给元素设ID便于后续js代码操作，如下：

<select id="prov"></select>
<select id="city"></select>
<select id="dist"></select>

2. js代码实现

通过jQuery和ajax实现省市区联动操作，核心代码如下：

1）通过ajax请求获取数据：

// 请求数据
function getProvince(){
    $.ajax({
        url: "prov.json", // 请求地址
        dataType: "json", // 返回数据类型
        type: "GET", // 请求方式
        success: function(data) { // 请求成功后触发的函数
            // 解析json数据，根据解析结果进行动态生成下拉框选项
            var provSelect = $("#prov");
            provSelect.append($("<option>").val("").text("请选择省份"));
            $.each(data.data, function(i, item) {
                provSelect.append($("<option>").val(item.provinceId).text(item.province));
            });
        }
    });
}

2）通过ajax的success方法，解析后端返回的JSON数据，并动态生成省份下拉框的选项。

3）省份下拉框的change事件触发，则调取后端接口获取该省份对应的所有城市信息，并动态生成市区下拉框的选项：

// 根据省份ID获取城市列表
function getCity(provId){
    $("#city").html("<option value=''>请选择城市</option>");
    $("#dist").html("<option value=''>请选择区县</option>");
    if(provId!=""){
        $.ajax({
            url: "city.json?provId="+provId, // 请求地址，加上省份ID
            dataType: "json", // 返回数据类型
            type: "GET", // 请求方式
            success: function(data) {
                // 解析json数据，根据解析结果进行动态生成下拉框选项
                var citySelect = $("#city");
                $.each(data.data, function(i, item) {
                    citySelect.append($("<option>").val(item.cityId).text(item.city));
                });
            }
        });
    }
}

4）城市下拉框的change事件触发，则调取后端接口获取该城市对应的所有区县信息，并动态生成区县下拉框的选项：

// 根据城市ID获取区县列表
function getDist(cityId){
    $("#dist").html("<option value=''>请选择区县</option>");
    if(cityId!=""){
        $.ajax({
            url: "dist.json?cityId="+cityId, // 请求地址，加上城市ID
            dataType: "json", // 返回数据类型
            type: "GET", // 请求方式
            success: function(data) {
                // 解析json数据，根据解析结果进行动态生成下拉框选项
                var citySelect = $("#dist");
                $.each(data.data, function(i, item) {
                    citySelect.append($("<option>").val(item.distId).text(item.district));
                });
            }
        });
    }
}

5）完整js代码如下：

// 初始化加载省份数据
$(function(){
    getProvince(); 
});

// 省份下拉框change事件
$("#prov").change(function(){
    var provId = $(this).val(); // 获取省份ID
    getCity(provId); // 显示对应城市列表
});

// 城市下拉框change事件
$("#city").change(function(){
    var cityId = $(this).val(); // 获取城市ID
    getDist(cityId); // 显示对应区县列表
});

// 加载省份数据
function getProvince(){
    $.ajax({
        url: "prov.json", // 请求地址
        dataType: "json", // 返回数据类型
        type: "GET", // 请求方式
        success: function(data) { // 请求成功后触发的函数
            // 解析json数据，根据解析结果进行动态生成下拉框选项
            var provSelect = $("#prov");
            provSelect.append($("<option>").val("").text("请选择省份"));
            $.each(data.data, function(i, item) {
                provSelect.append($("<option>").val(item.provinceId).text(item.province));
            });
        }
    });
}

// 根据省份ID获取城市列表
function getCity(provId){
    $("#city").html("<option value=''>请选择城市</option>");
    $("#dist").html("<option value=''>请选择区县</option>");
    if(provId!=""){
        $.ajax({
            url: "city.json?provId="+provId, // 请求地址，加上省份ID
            dataType: "json", // 返回数据类型
            type: "GET", // 请求方式
            success: function(data) {
                // 解析json数据，根据解析结果进行动态生成下拉框选项
                var citySelect = $("#city");
                $.each(data.data, function(i, item) {
                    citySelect.append($("<option>").val(item.cityId).text(item.city));
                });
            }
        });
    }
}

// 根据城市ID获取区县列表
function getDist(cityId){
    $("#dist").html("<option value=''>请选择区县</option>");
    if(cityId!=""){
        $.ajax({
            url: "dist.json?cityId="+cityId, // 请求地址，加上城市ID
            dataType: "json", // 返回数据类型
            type: "GET", // 请求方式
            success: function(data) {
                // 解析json数据，根据解析结果进行动态生成下拉框选项
                var citySelect = $("#dist");
                $.each(data.data, function(i, item) {
                    citySelect.append($("<option>").val(item.distId).text(item.district));
                });
            }
        });
    }
}

3. 数据接口实现

建议提供JSON格式数据接口，通过ajax获取并解析即可。下面我们简单给出三个示例便于进行实践操作。

1）省份数据（案例地址：prov.json）

{
    "code": 200,
    "data": [
        {"provinceId": "110000", "province": "北京市"},
        {"provinceId": "120000", "province": "天津市"},
        {"provinceId": "130000", "province": "河北省"},
        {"provinceId": "140000", "province": "山西省"},
        {"provinceId": "150000", "province": "内蒙古自治区"},
        {"provinceId": "210000", "province": "辽宁省"},
        {"provinceId": "220000", "province": "吉林省"},
        {"provinceId": "230000", "province": "黑龙江省"},
        {"provinceId": "310000", "province": "上海市"},
        {"provinceId": "320000", "province": "江苏省"}
    ]
}

2）城市数据（案例地址：city.json）

{
    "code": 200,
    "data": [
        {"cityId": "110100", "city": "北京市"},
        {"cityId": "120100", "city": "天津市"},
        {"cityId": "130100", "city": "石家庄市"},
        {"cityId": "130200", "city": "唐山市"},
        {"cityId": "130300", "city": "秦皇岛市"},
        {"cityId": "130400", "city": "邯郸市"},
        {"cityId": "130500", "city": "邢台市"},
        {"cityId": "130600", "city": "保定市"},
        {"cityId": "130700", "city": "张家口市"},
        {"cityId": "130800", "city": "承德市"}
    ]
}

3）区县数据（案例地址：dist.json）

{
    "code": 200,
    "data": [
        {"distId": "110101", "district": "东城区"},
        {"distId": "110102", "district": "西城区"},
        {"distId": "110105", "district": "朝阳区"},
        {"distId": "110106", "district": "丰台区"},
        {"distId": "110107", "district": "石景山区"},
        {"distId": "110108", "district": "海淀区"},
        {"distId": "110109", "district": "门头沟区"},
        {"distId": "110111", "district": "房山区"},
        {"distId": "110112", "district": "通州区"},
        {"distId": "110113", "district": "顺义区"}
    ]
}

至此，“ajax+jQuery实现级联显示地址的方法”已经详细讲述完毕，希望能给您带来一定的帮助。