如何在下拉选择框的更改事件中使用 Ajax 和 jQuery 调用 servlet？答案

【问题标题】：How to call servlet using Ajax and jQuery on change event of dropdown select box?如何在下拉选择框的更改事件中使用 Ajax 和 jQuery 调用 servlet？
【发布时间】：2013-01-09 12:14:19
【问题描述】：

我正在编写 JSP 和 Servlet 中的分页代码。在此我想显示员工列表。我尝试使用 MVC 模式来设计它。

调用以下代码的步骤：

在浏览器中调用 dispEmployee.jsp 页面。
单击其中的列出超链接。它调用 EmpServlet.java servlet。
从选择框中选择页码以逐页导航。

问题：

这里当我们按照上述步骤进行时。直到第 2 步，一切都运行良好。当我们尝试调用 step3 时，即当我们从选择框中选择另一个页码时，它会提供该选定页面的信息，但之后每当我们从选择框中选择另一个页面时，都不会调用更改事件

请朋友告诉我我的 ajax 和 jQuery 代码有什么问题。

请参考以下代码。这里没有给出DAO和Bean的代码。

dispEmployee.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Employees</title>
<script type="text/javascript" src="js/stdlib/jquery-1-4-2.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
alert("this is test");
// var link= $('#id_pageselect');
var selpage=$('#id_pageselect').val();
$("#id_pageselect").change(function(){
    alert("this is test1"); 
/*  $.ajax({
     type:"Post",
     url:"/EmpServletSnipet",
     data:"page=" + selpage,
     success:function(content){
                alert("test2"); 
                $('#display').empty();
                $('#display').append(content);
            }
     });*/
     //I have updated code by commenting the $.ajax method.and by writing following lines. 

   //I have also removed the '/' forward slash before EmpServletSnipet in following lines of code. 

    //Its working for fine but only for first chage event of select box after that when

    //I try to change the page from newly rendered select box Its not even invoke change event.

      $('#display').empty;
      $('#display').load('EmpServletSnipet',{page:$("#id_pageselect").val()});       
});
});
</script>

</head>
<body>
<div id="display" style="position:static; left:1003px; top:602px; width:500px; height:600px; z-index:10; overflow: scroll;">
<a href="http://localhost:8080/webdynamic/EmpServlet?page=1">List</a>
<select name="pageselect" id="id_pageselect">
<c:forEach begin="1" end="${noOfPages}" var="i">
            <c:choose>
                <c:when test="${currentPage eq i}">
                    <option value="${i}" selected>${i}</option>
                </c:when>
                <c:otherwise>
                    <option value="${i}">${i}</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
</select>
    <table border="1" cellpadding="5" cellspacing="5">
<tr>
        <th>Emp ID</th>
        <th>Emp Name</th>
        <th>Salary</th>
        <th>Dept Name</th>
    </tr>
    <c:forEach var="employee" items="${employeeList}">
        <tr>
            <td>${employee.employeeId}</td>
            <td>${employee.employeeName}</td>
            <td>${employee.salary}</td>
            <td>${employee.deptName}</td>
        </tr>
    </c:forEach>
</table>
</div>

EmpServlet.java servlet 充当控制器。此 servlet 从 jsp 文件获取页面请求并从 DAO 检索员工记录。只给出了 doGet 和 doPost 方法。

EmpServlet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
int page = 1;
    int recordsPerPage = 5;
    if(request.getParameter("page") != null)
        page = Integer.parseInt(request.getParameter("page"));
    EmployeeDAO dao = new EmployeeDAO();
    List<Employee> list = dao.viewAllEmployees((page-1)*recordsPerPage,
                             recordsPerPage);
    System.out.println("Employee list : "+list.size());
    int noOfRecords = dao.getNoOfRecords();
    int noOfPages = (int) Math.ceil(noOfRecords * 1.0 / recordsPerPage);
    request.setAttribute("employeeList", list);
    request.setAttribute("noOfPages", noOfPages);
    request.setAttribute("currentPage", page);
    RequestDispatcher view = request.getRequestDispatcher("displayEmp.jsp");
    view.forward(request, response);
}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request,response);
}

EmpServletSnipet.java servlet 用于在 ajax 请求中获取所选页面的记录，并将一些代码片段作为 ajax 响应发送

将呈现在具有 id 的显示中。只给出了 doGet 和 doPost 方法。

EmpServletSnipet.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("This is EmpServletSnipet");
int page = 1;
    int recordsPerPage = 5;
    if(request.getParameter("page") != null)
    page = Integer.parseInt(request.getParameter("page"));
    EmployeeDAO dao = new EmployeeDAO();
    List<Employee> list = dao.viewAllEmployees((page-1)*recordsPerPage,recordsPerPage);
    System.out.println("Employee list : "+list.size());
    int noOfRecords = dao.getNoOfRecords();
    int noOfPages = (int) Math.ceil(noOfRecords * 1.0 / recordsPerPage);
    PrintWriter pw=response.getWriter();

    response.setContentType("text/html");
    response.setHeader("Cache-control", "no-cache, no-store");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "-1");

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST");
    response.setHeader("Access-Control-Allow-Headers", "Content-Type");
    response.setHeader("Access-Control-Max-Age", "86400");

    pw.println("<a href=\"http://localhost:8080/webdynamic/EmpServlet?page=1\">List</a>");
    pw.println("<select name=\"pageselect\" id=\"id_pageselect\">");
        for(int i=1;i<=noOfPages;i++){
            if(i==page){
                pw.println("<option value="+ i +" selected>"+ i +"</option>");
            }else{
                pw.println("<option value="+ i +">"+ i +"</option>");
            }
        }

    pw.println("</select>");

    pw.println("<table border=\"1\" cellpadding=\"5\" cellspacing=\"5\">" +
            "<tr>" +
            "<th>Emp ID</th>" +
            "<th>Emp Name</th>" +
            "<th>Salary</th>" +
            "<th>Dept Name</th>" +
            "</tr>");
    Employee emp=null;
    for(int j=0;j<list.size();j++){
        emp=list.get(j);
        pw.println("<tr>" +
                "<td>"+emp.getEmployeeId()+"</td>" +
                "<td>"+emp.getEmployeeName()+"</td>" +
                "<td>"+emp.getSalary()+"</td>" +
                "<td>"+emp.getDeptName()+"</td>" +
                "</tr>");
    }

    pw.println("</table>");
    pw.println("<td><a href=\"EmpServlet?page="+(page-1)+"\" id=\"prevpg\">Previous</a></td>");
    pw.println("<td><a href=\"EmpServlet?page="+(page+1)+"\" id=\"nextpg\">Next</a></td>");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doGet(request,response);
}

请指导我解决这个问题。

【问题讨论】：

你的问题不够具体（太像“Bam，这是我的代码。它不起作用。请调试它。”）。因此，我将尽可能关闭 How to use Servlets and Ajax? 的副本和 How to populate child dropdownlists in JSP/Servlet? 的解决方案 3，以获取有关如何挽救此类要求的一般答案。
@BalusC 先生！我已经检查了您提供的链接，这对我很有帮助，但是如果您在我们从组合框中选择数字时检查 jsp 文件中的 jquery 代码，则 jquery 将被执行直到 alert("this is test1");语句，但它不会进一步执行代码。所以解决了这个问题后，我会知道servlet代码是否有问题。所以先生！请指导我。谢谢！
嗯，听起来好像 URL 完全错误。只需调查 HTTP 流量，看看浏览器是否实际上没有检索到 404。
@BalusC 先生！在我的上述评论中，我提到它执行到 alert("this is test1");语句，但它不会进一步执行代码。现在请参考上面 jsp 代码中的 jquery 代码我已经注释了旧代码并添加了两行新行。我还在那里提到了一些评论以供您参考。在上面提到的相应警报语句之后的此更改代码将被执行 & 并返回 ajax 响应但之后当您再次选择另一个页面时，在这种情况下它不会事件调用更改事件函数。先生，请指导我！
调查 HTTP 流量。请求是否发送？如果有，它收到了什么？在 Chrome/IE9/Firebug 中按 F12 并检查 Net(work) 选项卡。

标签： jquery ajax jsp servlets

【解决方案1】：

试试

<script type="text/javascript">
function attach(){
    $('#id_pageselect').on('change',function(){
       $('#display').load('/EmpServletSnipet',{page:$(this).val()});
       // attach again, because the old #id_pageselect is lost!
       attach();
    });
}
$(function(){
    attach();
})
</script>

【讨论】：