2016-05-21 53 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