三级联动

2019-12-22 15:01:21 阅读：275 来源： 互联网

标签：servlet resp 联动 import com javax 三级 areas

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>

标签：servlet,resp,联动,import,com,javax,三级,areas
来源： https://www.cnblogs.com/9797ch/p/12079844.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

三级联动