我正在创建一个简单的Java网页,它必须从用户那里获取输入,然后将数据推送到同一页面上的表中。一切都很完美。每次用户输入页面时,servlet都会执行该操作并重新加载页面和表格。我的问题是,如何更新表,而无需重新加载页面。通过servlet和jsp更新html表
其次,我有一个输入字段,其中搜索表。再次,它正在工作。但是,我也试图将jquerys tablesorter添加到我的表中。根据教程,我已经完成了所有工作,但排序不会发生。这可能是因为搜索字段?我也使用Bootstrap来设计我的表,这可能是原因(虽然jquerys tablesorter说,它也适用于Bootstrap)。
与Servlet返回:
request.getRequestDispatcher("WEB-INF/views/Login.jsp").forward(request, response);;
UPDATE 我的JSP是这样的: <%@标签库的URI = “http://java.sun.com/jsp/jstl/core” PREFIX = “C” %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My title</title>
<link href="webjars/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="css/myStyle.css" rel="stylesheet">
</head>
<body>
<form method="post" >
<div class="container">
<div class="jumbotron">
<label for="name">Nimi</label>
<input type="text" name="name" class="form-control"/>
<label for="email">Email</label>
<input type="email" name="email" class="form-control"/>
<label for="syKP">Sünnikuupäev</label>
<input type="text" name="syKP" class="form-control"/>
<label for="aadress">Aadress</label>
<input type="text" name="aadress" class="form-control"/><br>
<button type="submit" class="btn btn-info btn-md">Add</button>
</div>
</div>
</form>
<div class="container">
<div class="jumbotron">
<input type="text" id="search" placeholder="Type to search"><br>
<table class="table table-hover tablesorter" id="tabel">
<thead>
<tr>
<th>Nimi</th>
<th>Aadress</th>
<th>Synd</th>
<th>Email</th>
<th>Muuda</th>
<th>Kustuta</th>
</tr>
</thead>
<c:forEach items="${dataLst.getData()}" var="person">
<tbody id="table">
<tr >
<td><c:out value="${person.getNimi()}"/></td>
<td><c:out value="${person.getAadress()}"/></td>
<td><c:out value="${person.getSynniKP() }"/></td>
<td><c:out value="${person.getEmail()}"/></td>
<td><button class="btn button-default"><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button class="btn button-default"><span class="glyphicon glyphicon- remove-sign"></span></button></td>
</tr>
</tbody>
</c:forEach>
</table>
</div>
</div>
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="javascript/main.js"></script>
</body>
</html>
和我的servlet文件是这样的:
package com.energy;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet(urlPatterns="/login.do")
public class LoginServlet extends HttpServlet{
DataList dataLst = new DataList();
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
request.getRequestDispatcher("/WEB-INF/views/Login.jsp").forward(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String email = request.getParameter("email");
String aadress = request.getParameter("aadress");
String syKP = request.getParameter("syKP");
PersonData person = new PersonData(name, aadress, syKP, email);
dataLst.addPerson(person);
//request.setAttribute("name", request.getParameter("name"));
//request.setAttribute("email", request.getParameter("email"));
//System.out.println(dataLst.getData().get(0).getNimi());
request.setAttribute("dataLst",dataLst);
request.getRequestDispatcher("WEB-INF/views/Login.jsp").forward(request, response);;
}
}
要加载没有页面重新加载的表格,而不是直接提交表单,请使用ajax提交表单。另外,你可以提供网页和servlet的代码吗?它会帮助你在堆栈溢出时获得更快的响应。 – Abhishek
AJAX可能是最好的解决方案,但我不完全知道如何在此项目中使用它。 – JamesLinux