distpicker ajax(示例代码)

distpicker ajax是一个基于jQuery的插件，用于实现省市区三级联动选择器。它通过Ajax请求获取省市区的数据，并根据用户选择的省市自动更新区的选项。

我们需要在页面中引入jQuery和distpicker ajax的相关文件：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/distpicker@2.0.1/dist/distpicker.min.css">
<script src="https://cdn.jsdelivr.net/npm/distpicker@2.0.1/dist/distpicker.min.js"></script>

然后，在页面中添加一个用于展示省市区选择器的容器：

<div id="distpicker"></div>

接下来，我们需要在JavaScript代码中初始化distpicker ajax，并设置相关参数：

$(function() {
  $('#distpicker').distpicker({
    placeholder: false,  // 是否显示省市区的默认提示文字
    autoSelect: false,   // 是否自动选择省市区的默认值
    province: '广东省',  // 默认省份
    city: '深圳市',      // 默认城市
    district: '南山区',  // 默认区县
    ajax: true,          // 是否通过Ajax请求获取省市区数据
    url: '/api/district',  // 获取省市区数据的接口地址
    selectValue: 'id',   // 返回省市区数据的键名
    selectText: 'name'   // 返回省市区数据的键值
  });
});

在上面的示例代码中，我们通过设置ajax为true，开启了通过Ajax请求获取省市区数据的功能。然后，我们设置了url参数为'/api/district'，表示获取省市区数据的接口地址。接口返回的数据格式应该是一个数组，每个元素包含一个省市区的信息，其中包含一个键名为'id'表示省市区的值，键值为'name'表示省市区的名称。

通过以上的设置，当页面加载完成后，distpicker ajax会自动发送Ajax请求获取省市区数据，并根据默认值初始化省市区选择器。当用户选择省市时，它会自动发送Ajax请求获取对应的区县数据，并更新区县的选项。