java实现省市区三级联动

实现省市区三级联动的方法很多，本文将详细讲解如何使用Java实现省市区三级联动。

准备工作

在开始实现省市区三级联动前，我们需要准备一些数据。一般来说，省市区数据会以JSON格式存储在后端数据库或者外部接口中。我们需要在Java中读取这些数据，并将其转换为Java对象以便进行操作。

假设我们已经获取到了一个名为area.json的JSON数据文件，接下来我们将其读取并转换为Java对象。

import com.fasterxml.jackson.databind.ObjectMapper;
import java.io.File;
import java.io.IOException;

public class AreaUtil {
    private static ObjectMapper mapper = new ObjectMapper();

    public static List<Province> getProvinceList() throws IOException {
        File file = new ClassPathResource("area.json").getFile();
        return mapper.readValue(file, mapper.getTypeFactory().constructCollectionType(List.class, Province.class));
    }
}

实现方法

1. 前端实现

首先，在前端中定义三个下拉列表框，用于展示省市区数据。

<select id="provinceSelect"></select>
<select id="citySelect"></select>
<select id="districtSelect"></select>

接下来，我们需要通过Ajax从后端获取省市区数据，并将数据填充到相应的下拉列表框中。

function loadProvince() {
    $.ajax({
        url: '/province',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var option = document.createElement('option');
                option.value = data[i].id;
                option.text = data[i].name;
                $('#provinceSelect').append(option);
            }
            loadCity(data[0].id);
        }
    });
}

function loadCity(provinceId) {
    $.ajax({
        url: '/city/' + provinceId,
        type: 'get',
        dataType: 'json',
        success: function (data) {
            $('#citySelect').empty();
            for (var i = 0; i < data.length; i++) {
                var option = document.createElement('option');
                option.value = data[i].id;
                option.text = data[i].name;
                $('#citySelect').append(option);
            }
            loadDistrict(data[0].id);
        }
    });
}

function loadDistrict(cityId) {
    $.ajax({
        url: '/district/' + cityId,
        type: 'get',
        dataType: 'json',
        success: function (data) {
            $('#districtSelect').empty();
            for (var i = 0; i < data.length; i++) {
                var option = document.createElement('option');
                option.value = data[i].id;
                option.text = data[i].name;
                $('#districtSelect').append(option);
            }
        }
    });
}

在以上代码中，我们先使用loadProvince()函数从后端获取省份数据，并将数据填充到provinceSelect下拉列表框中。接着我们使用loadCity()函数根据选中的省份获取对应的城市数据，并填充到citySelect下拉列表框中。最后，根据选中的城市我们使用loadDistrict()函数获取对应的区县数据，并填充到districtSelect下拉列表框中。

2. 后端实现

后端技术栈我这里使用的是Spring Boot。

首先，我们需要将省市区数据存储到数据库中，用于提供给前端进行联动。我们使用MySQL作为数据库存储。

省份表：

CREATE TABLE `province` (
  `id` bigint(20) NOT NULL,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

城市表：

CREATE TABLE `city` (
  `id` bigint(20) NOT NULL,
  `name` varchar(50) NOT NULL,
  `province_id` bigint(20) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `fk_province_id` (`province_id`),
  CONSTRAINT `fk_province_id` FOREIGN KEY (`province_id`) REFERENCES `province` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

区县表：

CREATE TABLE `district` (
  `id` bigint(20) NOT NULL,
  `name` varchar(50) NOT NULL,
  `city_id` bigint(20) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `fk_city_id` (`city_id`),
  CONSTRAINT `fk_city_id` FOREIGN KEY (`city_id`) REFERENCES `city` (`id`) ON DELETE CASCADE ON UPDATE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

接着，我们需要编写对应的Controller类，实现省市区数据的查询。

省份查询：

@RestController
public class ProvinceController {
    @Autowired
    private ProvinceService provinceService;

    @GetMapping("/province")
    public List<Province> getProvinceList() {
        return provinceService.getProvinceList();
    }
}

城市查询：

@RestController
public class CityController {
    @Autowired
    private CityService cityService;

    @GetMapping("/city/{provinceId}")
    public List<City> getCityList(@PathVariable Long provinceId) {
        return cityService.getCityListByProvinceId(provinceId);
    }
}

区县查询：

@RestController
public class DistrictController {
    @Autowired
    private DistrictService districtService;

    @GetMapping("/district/{cityId}")
    public List<District> getDistrictList(@PathVariable Long cityId) {
        return districtService.getDistrictListByCityId(cityId);
    }
}

创建ProvinceService、CityService和DistrictService类，用于实现省市区数据的查询。

省份查询：

@Service
public class ProvinceService {
    @Autowired
    private ProvinceDao provinceDao;

    public List<Province> getProvinceList() {
        return provinceDao.findAll();
    }
}

城市查询：

@Service
public class CityService {
    @Autowired
    private CityDao cityDao;

    public List<City> getCityListByProvinceId(Long provinceId) {
        return cityDao.findByProvinceId(provinceId);
    }
}

区县查询：

@Service
public class DistrictService {
    @Autowired
    private DistrictDao districtDao;

    public List<District> getDistrictListByCityId(Long cityId) {
        return districtDao.findByCityId(cityId);
    }
}

最后，我们需要编写ProvinceDao、CityDao和DistrictDao类，用于查询省市区数据。

省份查询：

public interface ProvinceDao extends JpaRepository<Province, Long> {
}

城市查询：

public interface CityDao extends JpaRepository<City, Long> {
   List<City> findByProvinceId(Long provinceId);
}

区县查询：

public interface DistrictDao extends JpaRepository<District, Long> {
    List<District> findByCityId(Long cityId);
}

到这里为止，我们已经完成了Java实现省市区三级联动的全部操作。这里给出一组使用示例，方便您理解：

省份数据：

[
    {
        "id": 110000,
        "name": "北京市"
    },
    {
        "id": 120000,
        "name": "天津市"
    },
    {
        "id": 130000,
        "name": "河北省"
    }
]

城市数据：

[
    {
        "id": 110100,
        "name": "北京市",
        "provinceId": 110000
    },
    {
        "id": 120100,
        "name": "天津市",
        "provinceId": 120000
    },
    {
        "id": 130100,
        "name": "石家庄市",
        "provinceId": 130000
    }
]

区县数据：

[
    {
        "id": 110101,
        "name": "东城区",
        "cityId": 110100
    },
    {
        "id": 110102,
        "name": "西城区",
        "cityId": 110100
    },
    {
        "id": 120101,
        "name": "和平区",
        "cityId": 120100
    },
    {
        "id": 120102,
        "name": "河东区",
        "cityId": 120100
    },
    {
        "id": 130101,
        "name": "石家庄市",
        "cityId": 130100
    },
    {
        "id": 130102,
        "name": "长安区",
        "cityId": 130100
    }
]

以上就是使用Java实现省市区三级联动的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：java实现省市区三级联动 - Python技术站

java实现省市区三级联动

准备工作

实现方法

1. 前端实现

2. 后端实现

相关文章