Java中省市区三级联动,附前后台及数据库

Java中省市区三级联动,附前后台及数据库

Java中省市区三级联动,附前后台及数据库_第1张图片

实体pojo

@Entity
@Table(name = "province_city_district")
@Data
public class PCD {
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private int id;
	private int pid;
	private String name;

	@Override
	public String toString() {
		return "PCD [id=" + id + ", pid=" + pid + ", name=" + name + "]";
	}

}

后台代码controller

 @Controller
@RequestMapping("/login")
public class testController {
    @Autowired
    private testservice testService;
    
    @RequestMapping("test")
    public String demo() {
        return "externalMessFilling/index11";
    }

    /**
     * 省市区三级联动根据pid查询
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping("get")
    @ResponseBody
    public void getPCD(HttpServletRequest request,HttpServletResponse response) throws IOException {
        response.setContentType("text/xml;Charset=UTF-8");
        int pid = Integer.parseInt(request.getParameter("pid"));
        List<PCD> pcdList = testService.findPCDByPid(pid);
        String json = JSON.toJSONString(pcdList);
        response.getWriter().write(json);

    }

}

后台代码service

public interface testservice {
    public List<PCD> findPCDByPid(int pid);
}


//impl
  @Override
    public List<PCD> findPCDByPid(int pid) {
        return testDao.findPCDByPid(pid);
    }

后台代码dao

public interface testdao extends JpaRepository<PCD,Integer> {
    @Query(nativeQuery = true,
            value ="select * from province_city_district where pid =:pid")
    List<PCD> findPCDByPid(@Param("pid")int pid);
}

前台jsp代码


<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="Generator" content="ECSHOP v2.7.3" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <title>提交订单</title>
</head>
<body>
<div class="block clearfix"><div class="AreaR">
    <div class="block box"><div class="blank"></div>
    </div><div class="blank"></div><div class="box"><div class="box_1">
    <div class="userCenterBox boxCenterList clearfix" style="_height:1%;">
            <table width="100%" align="center" border="0" cellpadding="5"
                   cellspacing="1" bgcolor="#dddddd">
                <tr>
                    <td bgcolor="#ffffff" align="right" width="120px">区域信息:</td>
                    <td bgcolor="#ffffff">
                        <!---->
                        <select id="province"name="province" onchange="changeCity()">
                            <option value="">-- 请选择省 --</option>
                        </select>&nbsp;&nbsp;&nbsp;
                        <!---->
                        <select id="city" name="city" onchange="changeDistrict()">
                            <option value="">-- 请选择市 --</option>
                        </select>&nbsp;&nbsp;&nbsp;
                        <!--() -->
                        <select id="district" name="district" onchange="changeDhiddenValue()">
                            <option value="">-- 请选择县() --</option>
                        </select>
                        <!-- 添加隐藏域,用来提交给后台省市区对应的中文名 -->
                        <input type="hidden" name="phidden" id="phidden">
                        <input type="hidden" name="chidden" id="chidden">
                        <input type="hidden" name="dhidden" id="dhidden">
                    </td>
                </tr>

            </table>

    </div></div></div></div></div>


</body>
<%--切记切记要记得引 jquery包--%>
<script src="${ctx}/style/jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
 $(function(){
        $.ajax({
            type:"POST",
            url:"${ctx}/login/get",
            data:{"pid":0},
            dataType:"json",
            success:function(data){
                for(var i=0;i<data.length;i++){
                    var $option = $("+data[i].name+"");
                    $("#province").append($option);
                }
            }
        });
    });

    function changeCity(){
        //当省的内容发生变化的时候,响应的改变省的隐藏域的值
        $("#phidden").val($("#province option:selected").html());
        //页面加载完成,将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#province").val();
        $.ajax({
            url:"${ctx}/login/get",
            data:{"pid":pid},
            dataType:"json",
            success:function(data){
                //清空城市下拉列表框的内容
                $("#city").html("");
                $("#district").html("");
                //遍历json,json数组中每一个json,都对应一个省的信息,都应该在省的下拉列表框下面添加一个
                for(var i=0;i<data.length;i++){
                    var $option = $("+data[i].name+"");
                    $("#city").append($option);
                }
            }
        });
    }

    function changeDistrict(){
        //当城市的内容发生变化的时候,相应的改变城市的隐藏域的值
        $("#chidden").val($("#city option:selected").html());
        //页面加载完成,将省的信息加载完成
        //下拉列表框标签对象的val()方法就是选中的option标签的value的属性值
        var pid = $("#city").val();
        $.ajax({
            url:"${ctx}/login/get",
            data:{"pid":pid},
            dataType:"json",
            success:function(data){
                //清空城市下拉列表框的内容
                $("#district").html("");
                for(var i=0;i<data.length;i++){
                    var $option = $("+data[i].name+"");
                    $("#district").append($option);
                }
            }
        });
    }

    function changeDhiddenValue(){
        //当城市的内容发生变化的时候,相应的改变城市的隐藏域的值
        $("#dhidden").val($("#district option:selected").html());
    }
</script>
</html>

mysql省市区三级联动sql文件

链接: https://pan.baidu.com/s/1k0FR17IHiUmqp60nEXMbtA 提取码: 291f 

以上代码springboot项目全部复制即可,其他框架修改dao即可,亲测妥妥可以使用!

你可能感兴趣的:(Java小记)