三级联动_安科网

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>

三级联动

相关推荐