Question

您好我有一个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（）;”＆gt;这个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从action类获取status和numRecords的值到jsp，并用来自action class的新检索数据替换status和#records列的表。单击该行刷新按钮。

Answer 1

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

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

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

Answer 2

您似乎缺少一个从数据库中恢复值然后发送到客户端的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]
    }

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

2 个答案: