使用ajax/javascript在每行单击刷新按钮刷新jsp页面中的表列答案

【问题标题】：Refreshing the table columns in jsp page on click of refresh button at each row using ajax/javascript使用ajax/javascript在每行单击刷新按钮刷新jsp页面中的表列
【发布时间】：2013-09-25 07:32:25
【问题描述】：

您好，我有一个如下的 JSP 页面，jsp 页面包含一个表格，我通过从动作类中迭代列表来显示数据。

表格的每一行在行级别都有刷新按钮。jsp如下所示。

<script type="text/javascript">
      function refreshRecord(id)
       {
         $(document).ready(function(){

            var fileId=id;
            alert(fileId);
           $.ajax({
             type:"post",
             url:"checkStatusAndNumRecs",
             data: {fileId:fileId},  
             success:function(data){
             alert("returned from action");
             }
             });
             });    
             }
    </script>
</head>
<body>
<%@include file="index1.html" %>
<div class="box2">    
 <div class="box3"> 
<s:property value="userId"/>
</div>  
    <center><h2>FILE STATUS</h2></center>
<center> 

    <form action="Upload" method="post" enctype="multipart/form-data">
        <label for="myFile" class="text">Upload your file:</label>
        <input type="hidden" name="upload" value="upload"/>
        <input type="file" name="myFile" size="40"  class="file"/>
        <input type="submit" value="Upload" class="button"/>
        <input type="submit" value="Refresh" class="button"/>   
    </form>
    </center>        

      <center>
     <table border="1" class="displaytab" id="rtable">
     <s:if test="%{user.roles == 'admin'}">
     <tr>   <td  colspan="10" style="background:#7395B8;color:white;font-size:18px;font-weight:bold;"><center>Admin</center></td></tr>
     </s:if>
     <tr> 
     <th>FileId</th><th>File Name</th><th>Upload Date</th><th>#Records</th><th>Status</th><th>Estimated Time</th><th>Processed Records</th><th>Generate Report</th><th></th><s:if test="%{user.roles == 'admin'}"><th>Controls</th></s:if>
     </tr>

     <s:iterator value="uploadList" var="m"> 
        <tr>   
        <td><s:property value="%{#m.fileId}" /></td> 
        <td><s:property value="%{#m.fileName}" /></td>
        <td><s:property value="%{#m.uploadDate}" /></td>
        <td><s:property value="%{#m.numRecords}" /></td>
        <td><s:property value="%{#m.status}" /></td>
        <td>tbd</td>

        <td><s:property value="%{#m.numRecords}" /></td>
        <td><a href=""><img src="images/generate.png" title="Generate Report">    </a></td>
        <td><a href=""><img src="images/refresh.png" title="Refresh" onclick="refreshRecord(<s:property value="%{#m.fileId}" />);"></a></td>
         </tr>
         </s:iterator>
         </table>
         </center>

在刷新按钮 onclick 我正在调用 onclick="refreshRecord();"> 这个 javascript 方法它将转到操作类获取状态和 # 记录的最新值。

通过 ajax 我将此 fileId 传递给操作类 checkStatusAndNumRecsAction.java 以从数据库中获取更新的状态和#records 列值

我的动作类如下

import com.mxui.db.api.PersistenceService;
import com.mxui.db.service.*;
import com.opensymphony.xwork2.ActionSupport;

public class checkStatusAndNumRecsAction extends ActionSupport
{
    /**
     * 
     */
    private static final long serialVersionUID = 6450400234448854648L;

    private String status;

    public String getStatus()
    {
        return status;
    }

    public void setStatus(String status) 
    {
        this.status = status;
    }

    private long numRecords;

    public long getNumRecords()
    {
        return numRecords;
    }
    public void setNumRecords(long  numRecords) 
    {
        this.numRecords= numRecords;
    }

    private String fileId;
       public String getFileId()
    {
        return fileId;
    }
    public void setFileId(String fileId) 
    {
        this.fileId = fileId;
    }
    public String execute()
    {  
        PersistenceService svc = PersistenceServiceImpl.getInstance();
            status = svc.getStatusByFileId(fileId);
        System.out.println("status is "+status);
        numRecords = svc.getNumRecordsByFileId(fileId);
        System.out.println("num records are "+numRecords);
        return "SUCCESS";
    }
}

这个动作从数据库中获取状态和#records的值

我想要做的是我应该使用 ajax 从动作类获取状态和 numRecords 的值到 jsp，并用从动作类中检索到的新数据替换状态表和 #records 列。单击该行刷新按钮。

【问题讨论】：

您遇到了什么问题？什么不工作？
您在 jquery 成功回调中返回的数据对象将包含来自 servlet 的响应。检查这个并提取你需要的东西
我面临的问题是我没有得到，如何检索状态和#records frm 动作类的值并在相应的列中更新它。

标签： java javascript ajax jsp

【解决方案1】：

在success: 中定义的函数中，您需要编写javascript 来替换<TD> 中已刷新记录的内容。您可以使用fileId 识别<TD>。例如：<td id="%{#m.fileId}"><s:property value="%{#m.status}" /></td> 并使用 jQuery 搜索此 fileId 并使用 replaceWith 替换状态的新值。例如：$("td#fileId").replaceWith(newStatusData);

根据返回给 AJAX 调用的数据格式，您可能需要进行一些解析才能提取所需的数据。

编辑：刚刚看到您的评论。您可以控制返回到 AJAX 调用的数据的格式吗？如果是这样，您可能希望使用 JSON 格式。虽然简单的 CSV 格式就足够了。您还可以发布一个发送回 AJAX 的数据示例。

【讨论】：

数据会这样 String status = "new" numRecords = 2;这些在动作类的变量中，这些我必须进入我的jsp

【解决方案2】：

您似乎缺少一个 servlet，该 servlet 从数据库中恢复值，然后发送到客户端。在您的 servlet doPost() 方法中，您需要调用返回记录状态和记录数的方法并将它们返回给客户端。我想象servlet代码是这样的：

@WebServlet(checkStatusAndNumRecs)
class MyServlet extends HttpServlet

protected doPost(HttpServletRequest request, HttpServletResponse) 
             throws IOException, ServletException{

String fileId = request.getParameter("fileId");
String status = XXXXX.getStatus(fileId);
String numRec = XXXXX.getNumRecords();

String responseTxt = status + "," + numRec;
response.out.println(responseTxt);
response.getWriter().println(responseTxt);

}

XXXXX 是封装了对 DB 的调用以检索状态和记录号的值的对象。

您还需要将 jQuery AJAX 更改为如下内容：

$.ajax({
    type: "post",
    url: "checkStatusAndNumRecs",
    data: "fileId=" + fileId,
    success: function(data){  
        var rData = data.split(",");
        $("td#fileId").replaceWith(rData[0]);
        // Do the same for the record number data: rData[1]
    }

【讨论】：