Question

我正在创建一个简单的Java网页，它必须从用户那里获取输入，然后将数据推送到同一页面上的表。一切都很完美。每次用户输入页面时，servlet都会执行该操作并重新加载页面并更新表格。我的问题是，如何在不重新加载页面的情况下更新表。

其次，我有一个输入字段，用于搜索表格。它再次起作用。但是，我也试图将jquerys tablesorter添加到我的表中。我根据教程完成了所有工作，但排序并没有发生。这可能是因为搜索领域？我也使用Bootstrap设计我的表，这可能是原因（虽然jquerys tablesorter声明，它也适用于Bootstrap）。

servlet返回：

request.getRequestDispatcher("WEB-INF/views/Login.jsp").forward(request, response);;

更新我的JSP看起来像这样：＆lt;％@ taglib uri =＆＃34; http：//java.sun.com/jsp/jstl/core"前缀=＆＃34; C＆＃34;％GT;

<%@ 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);;
}

}

Answer 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）序列化表单。现在通过添加multipart注释使您的servlet能够接受@MultipartConfig个请求，如下所示 -

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

我们快到了！现在，如果您更喜欢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();
        }
    });
  });
})

servlet和html配置将保持不变。

P.S。我已经删除了代码jstl代码，因为我总是很难用jstl翻译的代码调整jQuery和bootstrap。

另外，tablesorter对我来说很好。虽然我没有实施搜索框，但我认为这不会对tablesorter造成任何问题。

通过servlet和jsp

1 个答案: