如何在下拉選擇框的變化事件中使用Ajax和jQuery調用servlet？

我正在研究JSP和Servlet中的分頁代碼。在這個我想顯示僱員的名單。我嘗試使用MVC模式設計這個。下面的代碼如何在下拉選擇框的變化事件中使用Ajax和jQuery調用servlet？

的步驟調用：

調用dispEmployee.jsp頁面瀏覽器。
點擊列表中的超鏈接。其中調用了EmpServlet.java servlet。
從選擇框中選擇頁碼以瀏覽頁面。

問：

這裏我們去的時候按照上面提到的步驟。到第二步，一切運行良好。當我們試圖調用第三步：它即當我們從選擇框中選擇另一個頁面數它給出的信息對於選擇的頁面，但在那之後，每當我們選擇其他頁面的選擇框沒有被調用更改事件

請告訴我的朋友我的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); 
}

請指導我這個問題。

來源

2013-01-09 Param-Ganak

你提的問題不夠具體（它太像*「巴姆，這裏是我的代碼，它不工作，請調試。」 *）。所以我儘可能地關閉[如何使用Servlets和Ajax？]（http://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax）和[如何填充在JSP/Servlet中的子dropdownlists？]（http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet）的一般答案如何挽救這樣的要求。 – BalusC

@BalusC先生！我檢查了你給出的鏈接，這對我有幫助，但如果你在jsp文件中檢查jquery代碼，當我們從組合框中選擇數字時，jquery會被執行直到alert（「this is test1」）;語句，但它不會進一步執行代碼。所以在解決這個問題之後，我會知道servlet代碼中是否有任何問題。所以先生！請在這裏指導我。謝謝！ –

好吧，聽起來好像該網址是錯誤的。只需調查HTTP流量即可查看瀏覽器是否實際上檢索到404。 – BalusC

嘗試

<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>

來源

2013-01-09 16:18:51

如何在下拉選擇框的變化事件中使用Ajax和jQuery調用servlet？

回答

相關問題