0

嗨，我有一个 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列。单击该行刷新按钮。

4

2 回答 2

0

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

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

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

于 2013-09-25T10:46:29.003 回答
0

您似乎缺少一个 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 是封装调用数据库以检索状态和记录编号值的对象。

您还需要将 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]
    }
于 2013-09-25T13:40:30.753 回答