ajax json 省市级联

Ajax和JSON是Web前端开发不可或缺的两种技术，它们的结合可以实现许多强大的特性。其中，省市级联是一种常见的应用场景，既方便了用户的操作，又提高了界面的美观程度。下面给出一个具体实现方法。

// 获取省份数据
$.ajax({
    url: '/province',type: 'GET',dataType: 'json',success: function(res) {
        if (res.code === 200) {
            var provinceHtml = '';
            $.each(res.data,function(i,item) { // 遍历省份数据
                provinceHtml += '' + item.name + '';
            });
            $('#province').html(provinceHtml); // 动态添加省份选项
        }
    }
});

// 获取城市数据
$('#province').on('change',function() { // 监听省份改变事件
    var code = $(this).val(); // 获取选中的省份code
    if (code === '') {
        $('#city').html('请选择城市');
        return;
    }
    $.ajax({
        url: '/city/' + code,success: function(res) {
            if (res.code === 200) {
                var cityHtml = '';
                $.each(res.data,item) { // 遍历城市数据
                    cityHtml += '' + item.name + '';
                });
                $('#city').html(cityHtml); // 动态添加城市选项
            }
        }
    });
});

以上代码实现的是基本的省市级联，将省份数据和城市数据分别通过Ajax请求获取，然后根据省份改变事件监听城市数据的变化。需要注意的是，返回的数据需要按照一定的格式进行解析，本例中以JSON格式返回，其中包括code和data两个属性，code表示请求的状态，data表示返回的数据内容。