我正在創建一個簡單的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