省市联动ajax，从数据库中获取

最新推荐文章于 2021-08-06 03:07:55 发布

QQ1138139237

最新推荐文章于 2021-08-06 03:07:55 发布

阅读量186

点赞数

分类专栏： javaweb 文章标签： ssm

本文链接：https://blog.csdn.net/weixin_43847957/article/details/103115256

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax前端源码
Mapper 和 model 都是由逆向工程生成

//todo 省市联动
//页面加载显示全部的省
$.ajax({
    url:"${pageContext.request.contextPath}/province/findAllProvince.do",
    type:"post",
    dataType:"json",
    success:function(data){
        $(data).each(function(a,b){
            if(b.xzqhmc!=$("select[name='请选择省']").val()  ){
                $("#province").append("<option value='"+b.xzqhbh+"'>"+b.xzqhmc+"</option>");
            }
        });
    },
    error:function(){

    }
});
$("#province").change(function(){
    $("#city").empty();
    $("#area").empty();
    $("#town").empty();
    var a = $("#province option:selected").text();
    $("#provinceName").val(a);
    var pId = $("#province").val();
    $("#city").append("<option value='0'>请选择市</option>");
    $("#area").append("<option value='0'>请选择区</option>");
    $("#town").append("<option value='0'>请选择乡镇</option>");
    $.ajax({
        url:"${pageContext.request.contextPath}/province/findAllCity.do",
        type:"post",
        dataType:"json",
        data:{"province":pId},
        success:function(data){
            $(data).each(function(a,b){
                $("#city").append("<option value='"+b.xzqhbh+"'>"+b.xzqhmc+"</option>");
            });
        },
        error:function(){
        }
    });
});

$("#city").change(function(){
    $("#area").empty();
    $("#town").empty();
    var pId = $("#city").val();
    var a = $("#city option:selected").text();
    $("#cityName").val(a);
    $("#area").append("<option value='0'>请选择区</option>");
    $("#town").append("<option value='0'>请选择乡镇</option>");

    $.ajax({
        url:"${pageContext.request.contextPath}/province/findAllArea.do",
        type:"post",
        dataType:"json",
        data:{"city":pId},
        success:function(data){
            $(data).each(function(a,b){
                $("#area").append("<option value='"+b.xzqhbh+"'>"+b.xzqhmc+"</option>");
            });
        },
        error:function(){
        }
    });
});
$("#area").change(function(){
    $("#town").empty();
    var pId = $("#area").val();
    var a = $("#area option:selected").text();
    $("#areaName").val(a);
    $("#town").append("<option value='0'>请选择乡镇</option>");

    $.ajax({
        url:"${pageContext.request.contextPath}/province/findAllTown.do",
        type:"post",
        dataType:"json",
        data:{"area":pId},
        success:function(data){
            $(data).each(function(a,b){
                $("#town").append("<option value='"+b.xzqhbh+"'>"+b.xzqhmc+"</option>");
            });
        },
        error:function(){
        }
    });
});


<fieldset>
    <select name="provinceCode" id="province">
        <option value="1">请选择省</option>
    </select>

    <select  name="city" id="city">
        <option value="1">请选择市</option>
    </select>

    <select name="area" id="area">
        <option value="1">请选择区</option>
    </select>
    <select id="town" name="town">
        <option value="1">请选择乡镇</option>
     </select>
    <%--<script type="text/javascript" src="${pageContext.request.contextPath}/js/city.js"></script>--%>
</fieldset>

Service层

package edu.tjau.rj.platform.service;

import edu.tjau.rj.platform.model.Xzqhb;

import java.util.List;

public interface ProvinceService {
    List<Xzqhb> findAllProvince();
    List<Xzqhb> findAllCity(String province);
    List<Xzqhb> findAllArea(String city);
    List<Xzqhb> findAllTown(String area);
}

package edu.tjau.rj.platform.service.impl;

import edu.tjau.rj.platform.mapper.XzqhbMapper;
import edu.tjau.rj.platform.model.Xzqhb;
import edu.tjau.rj.platform.model.XzqhbExample;
import edu.tjau.rj.platform.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProvinceServiceImpl implements ProvinceService {
    @Autowired
    private XzqhbMapper xzqhbMapper;
    @Override
    public List<Xzqhb> findAllProvince() {
        XzqhbExample xzqhbExample = new XzqhbExample();
        XzqhbExample.Criteria criteria = xzqhbExample.createCriteria();
        criteria.andXzqhjbEqualTo("1");
        List<Xzqhb> xzqhbs = xzqhbMapper.selectByExample(xzqhbExample);
        return xzqhbs;
    }

    @Override
    public List<Xzqhb> findAllCity(String province) {
        XzqhbExample xzqhbExample = new XzqhbExample();
        XzqhbExample.Criteria criteria = xzqhbExample.createCriteria();
        criteria.andSsxzqhbhEqualTo(province);

        List<Xzqhb> xzqhbs = xzqhbMapper.selectByExample(xzqhbExample);
        return xzqhbs;
    }

    @Override
    public List<Xzqhb> findAllArea(String city) {
        XzqhbExample xzqhbExample = new XzqhbExample();
        XzqhbExample.Criteria criteria = xzqhbExample.createCriteria();
        criteria.andSsxzqhbhEqualTo(city);
        List<Xzqhb> xzqhbs = xzqhbMapper.selectByExample(xzqhbExample);
        return xzqhbs;
    }

    @Override
    public List<Xzqhb> findAllTown(String area) {
        XzqhbExample xzqhbExample = new XzqhbExample();
        XzqhbExample.Criteria criteria = xzqhbExample.createCriteria();
        criteria.andSsxzqhbhEqualTo(area);
        List<Xzqhb> xzqhbs = xzqhbMapper.selectByExample(xzqhbExample);
        return xzqhbs;
    }
}

Controller控制层

package edu.tjau.rj.platform.web.controller;

import edu.tjau.rj.platform.model.Xzqhb;
import edu.tjau.rj.platform.service.ProvinceService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("/province")
public class ProvinceController {
    @Autowired
    private ProvinceService provinceService;
    //获取所有的省信息
    @RequestMapping ("/findAllProvince")
    @ResponseBody
    public List<Xzqhb> findAllProvince(){
        List<Xzqhb> allProvince = provinceService.findAllProvince();
        return  allProvince;
    }

    //获取所有城市信息
    @RequestMapping("/findAllCity")
    @ResponseBody
    public List<Xzqhb> findAllCity(String province){
        List<Xzqhb> allCity = provinceService.findAllCity(province);
        return  allCity;
    }

    //获取所有的县
    @RequestMapping("/findAllArea")
    @ResponseBody
    public List<Xzqhb> findAllArea(String city){
        List<Xzqhb> allArea = provinceService.findAllArea(city);
        return allArea;
    }
    @RequestMapping("/findAllTown")
    @ResponseBody
    public List<Xzqhb> findAllTown(String area){
        List<Xzqhb> allArea = provinceService.findAllTown(area);
        return allArea;
    }
}