2016-05-21 50 views
0

我正在创建一个简单的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);; 
} 

} 
+0

要加载没有页面重新加载的表格,而不是直接提交表单,请使用ajax提交表单。另外,你可以提供网页和servlet的代码吗?它会帮助你在堆栈溢出时获得更快的响应。 – Abhishek

+0

AJAX可能是最好的解决方案,但我不完全知道如何在此项目中使用它。 – JamesLinux

回答

1

用于动态更新表格:

通常,JSON用于从服务器发送响应。使用GSON.jar将java对象转换为相应的JSON。这被替换的servlet请求调度如图中更新servlet类如下─

package com.energy; 

import java.io.IOException; 

import javax.servlet.ServletException; 
import javax.servlet.annotation.MultipartConfig; 
import javax.servlet.annotation.WebServlet; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 

import com.google.gson.Gson; 

@WebServlet(urlPatterns="/login.do") 
@MultipartConfig 
public class LoginServlet extends HttpServlet{ 

    private static final long serialVersionUID = 1L; 
    DataList dataLst = new DataList(); 

    protected void doGet(HttpServletRequest request, HttpServletResponse response) 
     throws ServletException, IOException{ 
    } 

    protected void doPost(HttpServletRequest request, HttpServletResponse response) 
     throws ServletException, IOException { 
    String name = request.getParameter("name"); 
    String email = request.getParameter("email"); 
    String address = request.getParameter("aadress"); 
    String syKP = request.getParameter("syKP"); 

    PersonData person = new PersonData(name, address, 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()); 

    response.setContentType("application/json"); 
    response.setCharacterEncoding("UTF-8"); 
    Gson data = new Gson(); 
    String tmp = data.toJson(dataLst); // won't work if you don't assign it to a string. 
    response.getWriter().write(tmp); 
    //request.getRequestDispatcher("WEB-INF/views/Login.jsp").forward(request,  response);; 
    } 

} 

提交使用AJAX(避免页面重载)的形式,我已经修改了你的形式,这 -

<form method="post" id="loginForm" enctype="multipart/form-data"> 

multipart-form-data有助于以标准方式(HTML5)对表单进行序列化。现在,如图所示如下─

@WebServlet(urlPatterns="/login.do") 
@MultipartConfig 
public class LoginServlet extends HttpServlet{ 
    // Rest of the code. 
} 

我们几乎就在那里能够接受multipart请求你的servlet通过addding @MultipartConfig注释!现在,如果您更喜欢使用JavaScript,请将以下函数添加到您的main.js以进行ajax调用。

function addData(){ 
    if(window.XMLHttpRequest) { //Assuming you're not on one of the old IEs. 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange=function() { 
     if (xhttp.readyState == 4 && xhttp.status == 200) { 
      var myArr = JSON.parse(xhttp.responseText); 
      //console.log(myArr); 
      addToTable(myArr); // function to add data to table. 

     } 
    } 
    xhttp.open("POST","login.do",true); 
    var formData = new FormData(document.getElementById('loginForm')); 
    xhttp.send(formData); 
    } 
    else console.log('not working'); 
} 

请确保您点击Add按钮调用此功能。

<button type="submit" class="btn btn-info btn-md" onclick="addData();">Add</button> 

以下是编写addToTable函数的方法之一。

function addToTable(data) { 
    var dataTable = document.getElementById("tabel"); 
    for(var i = 0; i<data.pList.length; i++) { 
    var row = dataTable.insertRow(); 
    var tmp = data.pList[i]; 

    var cell0 = row.insertCell(); //nimi 
    var cell1 = row.insertCell(); //aadress 
    var cell2 = row.insertCell(); //synd 
    var cell3 = row.insertCell(); //email 
    var cell4 = row.insertCell(); //muuda 
    var cell5 = row.insertCell(); //kustuta 

    cell0.innerHTML = tmp.name; 
    cell1.innerHTML = tmp.address; 
    cell2.innerHTML = tmp.syKP; 
    cell3.innerHTML = tmp.email; 
    cell4.innerHTML = '<button class="btn button-default"><span class="glyphicon glyphicon-pencil"></span></button>'; 
    cell5.innerHTML = '<button class="btn button-default"><span class="glyphicon glyphicon-remove-sign"></span></button>'; 
    } 
} 

注意pList是列表中DataList.java在那里我存储PersonDetails名称。

如果您熟悉jQuery的,同样的事情可以做如下 -

$(function() { 
    $('button[type=button]').on('click',function() { 
    var upForm = $('form').get(0); 
    var $form = new FormData(upForm); 
    $.ajax({ 
     url:'login.do', 
     data: $form, 
     type: 'POST', 
     processData: false, 
     contentType: false, 
     success: function(responseText) { 
      var data = responseText.pList; 
      $.each(data, function(index, tmp) { 
       var table1 = $('table>tbody').get(0); 
       var row = table1.insertRow(); 
       var cell0 = row.insertCell(); //nimi 
       var cell1 = row.insertCell(); //aadress 
       var cell2 = row.insertCell(); //synd 
       var cell3 = row.insertCell(); //email 
       var cell4 = row.insertCell(); //muuda 
       var cell5 = row.insertCell(); //kustuta 

       cell0.innerHTML = tmp.name; 
       cell1.innerHTML = tmp.address; 
       cell2.innerHTML = tmp.syKP; 
       cell3.innerHTML = tmp.email; 
       cell4.innerHTML = '<button class="btn button-default"><span class="glyphicon glyphicon-pencil"></span></button>'; 
       cell5.innerHTML = '<button class="btn button-default"><span class="glyphicon glyphicon-remove-sign"></span></button>'; 
      }); 
      $('#tabel').tablesorter(); 
     } 
    }); 
    }); 
}) 

servlethtml配置将保持不变。

P.S.我已经删除了代码jstl代码,因为我一直很难调整jQuery并使用jstl翻译的代码进行引导。

此外,tablesorter适合我。虽然我没有执行搜索框,但我不认为这会对tablesorter造成任何问题。

+0

非常感谢您解释清楚的答案,但我仍然有一个问题。第一部分,我使用Gson的地方,我应该把它放在我的servlet中,并且只替换request.getRequestDispatcher(“WEB-INF/views/Login.jsp”)行 你提供了什么?因为如果我这样做,它会得到错误,其中指出“类型不匹配:不能从字符串转换为Gson.' – JamesLinux

+0

我将用整个servlet更新答案。 – Abhishek

+0

谢谢,这清除了这部分。虽然,我必须保留如果我插入数据并点击添加,错误弹出 在doGet(..)也行,否则我的页面不会显示任何东西。任何想法,为什么是这样吗?此外,现在我遇到了一个新问题。 'java.lang.NoClassDefFoundError:COM /谷歌/ GSON/GSON \t com.energy.LoginServlet.doPost(LoginServlet.java:49) \t javax.servlet.http.HttpServlet.service(HttpServlet.java:647) \t javax.servlet.http.HttpServlet.service(HttpServlet.java:728) \t org.apache.tomcat.web socket.server.WsFilter.doFilter(WsFilter.java:51)' – JamesLinux