使用Ajax和Json实现岗位和员工的下拉框联动

选择了一个下拉框数据后,另一个下拉框中的数据改变。

需求:通过岗位的下拉框,找员工的下拉框 

数据库表结构

 

 创建岗位和员工的vo类

Emp.java

public class Emp {
    private int empid;
    private int dutyid;
    private String empname;

    public int getEmpid() {
        return empid;
    }

    public void setEmpid(int empid) {
        this.empid = empid;
    }

    public int getDutyid() {
        return dutyid;
    }

    public void setDutyid(int dutyid) {
        this.dutyid = dutyid;
    }

    public String getEmpname() {
        return empname;
    }

    public void setEmpname(String empname) {
        this.empname = empname;
    }
}

Duty.java

public class Duty {
    private int dutyid;
    private String dutyname;

    public int getDutyid() {
        return dutyid;
    }

    public void setDutyid(int dutyid) {
        this.dutyid = dutyid;
    }

    public String getDutyname() {
        return dutyname;
    }

    public void setDutyname(String dutyname) {
        this.dutyname = dutyname;
    }
}

 Servlet

DutyController.java 进入到jsp页面,显示岗位下拉框的数据

import com.fasterxml.jackson.databind.ObjectMapper;
import com.hyxy.project.vo.Duty;
import com.oracle.jdbc.util.Dao;

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("/duty.do") //浏览器访问 http:localhost:8080/project/duty.do
public class DutyController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String sql="select * from tb_duty"; //在数据库中查询岗位表
        List<Duty> list= Dao.query(sql,Duty.class);//将查询结果存到集合中
        req.setAttribute("list",list);
        req.getRequestDispatcher("/linkselect1.jsp").forward(req,resp);//跳转到JSP页面
    }
}

 linkselect1.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
    <script>
        $(function (){
            $("#duty").change(function (){
               $.ajax({
                   url:"${pageContext.request.contextPath}/ajax.do",//ajax请求发给Web程序处理
                   type:"post",
                   data:{dutyid:$("#duty").val()},
                   dataType:"json",//服务器响应回数据的类型
                    //success:回调函数,当响应完成且成功时,自动执行success的function
                   success:function (result){//result直接就是json对象,此处是数组
                       //每次先清除下拉框中的数据
                       for(var i=$("#emp")[0].options.length-1;i>=1;i--){//从后往前删除
                            $("#emp")[0].remove(i);
                       }
                       //将数组中的内容填充到员工的下拉框中
                       for(var i=0;i<result.length;i++){
                            var option =new Option();
                            option.value=result[i].empid;
                            option.text=result[i].empname;//文本内容
                            $("#emp")[0].add(option);
                       }
                   }
               });
            });

        });
    </script>
</head>
<body>
<!--浏览器访问 http:localhost:8080/project/duty.do -->
    岗位:<select style="width:150px" id="duty">
        <option value="">请选择</option>
        <c:forEach items="${list}" var="d">
            <option value="${d.dutyid}">${d.dutyname}</option><!--通过员工id获取员工姓名-->
        </c:forEach>
    </select>
    员工:<select style="width: 150px" id="emp">
        <option value="">请选择</option>
    </select>
</body>
</html>

AjaxController.java

import com.fasterxml.jackson.databind.ObjectMapper;
import com.hyxy.project.vo.Emp;
import com.oracle.jdbc.util.Dao;

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("/ajax.do")
public class AjaxController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String dutyid=req.getParameter("dutyid");
        String sql="select empid,empname from tb_emp where dutyid =?";//通过查询岗位id,获得员工id和姓名
        List<Emp> list = Dao.query(sql,Emp.class,dutyid);
        PrintWriter pw= resp.getWriter();
        ObjectMapper objectMapper=new ObjectMapper();
        pw.print(objectMapper.writeValueAsString(list));//将对象写成json格式的内容,响应回页面的jsp
    }
}

运行效果

浏览器访问 http://localhost:8080/project/duty.do

 

 

 改进:进入到jsp页面就发送查询岗位的Ajax请求

DutyController.java


import com.fasterxml.jackson.databind.ObjectMapper;
import com.hyxy.project.vo.Duty;
import com.oracle.jdbc.util.Dao;

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("/duty.do")
public class DutyController extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String sql="select * from tb_duty";
        List<Duty> list= Dao.query(sql,Duty.class);
        PrintWriter pw = resp.getWriter();//linkselecct2.jsp
        ObjectMapper objectMapper=new ObjectMapper();
        pw.print(objectMapper.writeValueAsString(list));//将对象编写成json格式
    }
}

linkselect2.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.9.1.min.js"></script>
    <script>
        $(function (){
            $.ajax({
                url:"${pageContext.request.contextPath}/duty.do",//ajax请求发送到该路径
                dataType:"json",
                success:function (result){//result直接就是json对象,此处是数组
                    //每次先清除下拉框中的数据
                    for(var i=$("#duty")[0].options.length-1;i>=1;i--){//从后往前删除
                        $("#duty")[0].remove(i);
                    }
                    //将数组中的内容填充到下拉框
                    for(var i=0;i<result.length;i++){
                        var option =new Option();
                        option.value=result[i].dutyid;
                        option.text=result[i].dutyname;
                        $("#duty")[0].add(option);
                    }
                }
            });
            $("#duty").change(function (){
                $.ajax({
                    url:"${pageContext.request.contextPath}/ajax.do",
                    type:"post",
                    data:{dutyid:$("#duty").val()},
                    dataType:"json",
                    success:function (result){//result直接就是json对象,此处是数组
                        //每次先清除下拉框中的数据
                        for(var i=$("#emp")[0].options.length-1;i>=1;i--){//从后往前删除
                            $("#emp")[0].remove(i);
                        }
                        //将数组中的内容填充到下拉框
                        for(var i=0;i<result.length;i++){
                            var option =new Option();
                            option.value=result[i].empid;
                            option.text=result[i].empname;
                            $("#emp")[0].add(option);
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<!--浏览器访问 http:localhost:8080/project/linkselect2.jsp -->
岗位:<select style="width:150px" id="duty">
    <option value="">请选择</option>

</select>
员工:<select style="width: 150px" id="emp">
    <option value="">请选择</option>
</select>
</body>
</html>

运行效果

浏览器访问 http://localhost:8080/project/linkselect2.jsp

 

 

  • 1
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论

打赏作者

aigo-2021

您的鼓励是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值