三级联动
package com.bj.controller;
import com.bj.entity.Area;
import com.bj.service.AreaService;
import com.bj.service.impl.AreaServiceImpl;
import com.google.gson.Gson;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/areaServlet")
public class AreaServlet extends HttpServlet{
//首先肯定要 初始化 这个类
private AreaService as = new AreaServiceImpl();
@Override充实
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
Integer parentid=Integer.parseInt(req.getParameter("parentid"));
List<Area> areas = as.findAreaByParentid(parentid);
Gson gson=new Gson();
String areaStr = gson.toJson(areas);
resp.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
PrintWriter writer = resp.getWriter();
writer.print(areaStr);
}
}<%--
Created by IntelliJ IDEA.
User: x1c
Date: 2019-12-22
Time: 12:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<script src="jquery-1.12.3.min.js"></script>
<script>
function showData(val,tagid){
//使用ajax进行异步请求
$.ajax({
type:"GET",
url:"areaServlet",
data:{parentid:val},
dataType:‘JSON‘,
success:function(areas){
//上一个标签每次换了选择 后面都的清空
$(tagid).html(" <option>-请选择-</option>")
for(var i in areas){
$(tagid).append(‘<option value="‘+areas[i].areaid+‘">‘+areas[i].areaname+‘</option>‘)
}
//必须加上这个 要不然不能达到 省份改变 县城刷新
if(tagid=="#city"){
$("#qu").html("<option>-请选择区-</option>")
}
}
})
}
//页面加载函数
$(function(){
//传的第一个参数为0 就可以吧省会都查出来 传入 Provience标签
showData(0,‘#provience‘)
})
</script>
</head>
<body>
籍贯：
<select id="provience" onchange="showData(this.value,‘#city‘)">
<option>-请选择-</option>
</select>
<select id="city" onchange="showData(this.value,‘#qu‘)">
<option>-请选择-</option>
</select>
<select id="qu">
<option>-请选择区-</option>
</select>
</body>
</html> 相关推荐
SXIAOYI 2020-09-16
xiaonuoyal 2020-06-17
SXIAOYI 2020-06-11
yinbaoshiguang 2020-06-09
Chydar 2020-06-02
nalanrumeng 2020-06-01
xiaonuoyal 2020-06-01
nalanrumeng 2020-05-19
ITprivate 2020-04-15
xiaonuoyal 2020-04-14
ITprivate 2020-03-26
ITprivate 2020-02-12
nalanrumeng 2020-01-13
xiaonuoyal 2019-12-07
xiaonuoyal 2019-11-18
TOmyhonour 2019-11-16
csdnxpw 2019-11-12