使用 ajax 调用使用操作类返回的数据刷新(更新）表的各个行
Refreshing (updating) individual rows of a table with the data returned by the action class using ajax call
这么多天以来，我试图完成这项工作，但失败了。在下面看看我的jsp：
这里我有一个表格，每一行我都有刷新图标，我想在单击图标时刷新每行。
单击我正在调用一个函数> refreshRecord(value);值（参数）是 fileid（唯一）->即我作为参数传递给函数的表的第一列。
ajax正在使用fileId调用checkStatusAndNumRecs aciton，在操作类中，我正在调用我的 JPA 方法来从数据库中获取数据，它读取带有该行fileId我传递的内容并将其放入JSONObject。
在 ajax 中的 jsp 部分中，它的执行成功需要一段时间，并且大部分时间都在执行错误，当它成功时，在成功部分内部，它无法执行此行>var obj = jQuery.parseJSON(eval(data));
，有时数据不会从操作类返回到 Ajax。
这是我的jsp页面：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>File Upload</title>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link rel="stylesheet" type="text/css" href="css/button.css" />
<link href="css/common-style.css" rel="stylesheet" type="text/css" />
<style>
a{
color:white;
text-decoration:none;
}
</style>
<script type="text/javascript">
var id;
function refreshRecord(value)
{
id = value;
}
$(document).ready(function(){
$("#refresh").click(function(){
var fileId=id;
$.ajax({
type:"post",
url:"checkStatusAndNumRecs",
data:{fileId:fileId},
success:function(data)
{
alert(data);
var obj = jQuery.parseJSON(eval(data));->THis statement is not executing
aler("after JSON OBJECT"+obj.status);
$("#div1").html(obj.status);
$("#div2").html(obj.records);
},
error:function(data)
{
$("#div1").html("It was a failure !!!");
}
});
});
});
</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>
<s:if test="%{user.roles == 'admin'}">
<form action="manage" method="post" enctype="multipart/form-data">
<label for="myFile" class="text">Click to manage service providers:</label>
<input type="submit" value="Manage" class="button"/>
</form>
</s:if>
</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><div id="div2"><s:property value="%{#m.numRecords}" /></div></td>
<td><div id="div1"><s:property value="%{#m.status}" /></div></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" id="refresh" onclick="refreshRecord(<s:property value="%{#m.fileId}" />);"></a></td>
<s:if test="%{user.roles == 'admin'}">
<td><a href=""><img src="images/details.png"></a>
<a href=""><img src="images/plus.png" title="Add Instance"></a>
<a href=""><img src="images/minus.png" title="Remove Instance"></a>
<a href=""><img src="images/download.png" title="Download"></a>
<a href=""><img src="images/reconnect.png" title="Reconnect"></a></td>
</s:if>
</tr>
</s:iterator>
</table>
</center>
<br>
<br>
<br>
<br>
<center>
<s:if test="%{user.roles == 'admin'}">
<!-- <select name="user names">
<s:iterator value="userNamesList">
<option value="emailColumn" > <s:property/>
</option>
</s:iterator>
</select> -->
<table border="1" class="displaytab" id="usertab">
<s:if test="%{uploadListMap.size() != 0}">
<tr> <td colspan="10" style="background:#7395B8;color:white;font-size:18px;font-weight:bold;">User Job Details</center></td></tr>
<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="%{uploadListMap}">
<tr> <td colspan="10" style="background:#7395B8;color:white;font-size:18px;font-weight:bold;"><center><s:property value="key"/></center></td>
<s:iterator value="value" var="u">
<tr>
<td><s:property value="%{#u.fileId}" /></td>
<td><s:property value="%{#u.fileName}" /></td>
<td><s:property value="%{#u.uploadDate}" /></td>
<td><s:property value="%{#u.numRecords}" /></td>
<td><s:property value="%{#u.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" id="refresh" onclick="refreshRecord(<s:property value="%{#u.fileId}" />);"></a></td>
<td><a href=""><img src="images/details.png"></a>
<a href=""><img src="images/plus.png" title="Add Instance"></a>
<a href=""><img src="images/minus.png" title="Remove Instance"></a>
<a href=""><img src="images/download.png" title="Download"></a>
<a href=""><img src="images/reconnect.png" title="Reconnect"></a></td>
</tr>
</s:iterator>
</tr>
</s:iterator>
</s:if>
</table>
</s:if>
</center>
</div>
</body>
</html>
这是我的行动类：
p
ackage com.mxui;
import com.mxui.db.api.PersistenceService;
import com.mxui.db.service.*;
import org.json.simple.JSONObject;
import com.opensymphony.xwork2.ActionSupport;
public class checkStatusAndNumRecsAction extends ActionSupport
{
/**
*
*/
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()
{
JSONObject obj = new JSONObject();
System.out.println("here inside action-------------");
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);
obj.put("status", status);
obj.put("records", numRecords);
System.out.print("json data is "+obj);
return "SUCCESS";
}
}
请在这方面指导我，我为此奋斗了这么多天，而且我是 ajax 的新手。提前谢谢你。
This is my struts.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.devMode" value="false" />
<constant name="struts.multipart.maxSize" value="1000000" />
<result-type name="json" class="org.apache.struts2.json.JSONResult" default="false" />
<package name="struts" extends="struts-default">
<action name="RegisterationProcess" class="com.mxui.RegisterationFormAction">
<result name="SUCCESS">registerationform.jsp</result>
<result name="customerRegister">successregisteration.jsp</result>
</action>
<action name="CheckUserValidation" class="com.mxui.CheckUserAction">
<result name="SUCCESS">noofrows.jsp</result>
</action>
<action name="ProcessLogin" class="com.mxui.LoginAction">
<result name="LOGIN" >login.jsp</result>
<result name="REGISTER">registerationform.jsp</result>
<result name="ERROR" type="redirect">login.jsp</result>
<result name="FILEUPLOAD" type="redirect">Upload</result>
</action>
<action name="Upload" class="com.mxui.UploadFileAction">
<result name="SUCCESS">fileupload.jsp</result>
<result name="LOGINERROR" type="redirect">ProcessLogin</result>
<result name="PREVIEW" type="redirect">FilePreviewAction</result>
<result name="ERROR">error.jsp</result>
</action>
<action name="FilePreviewAction" class="com.mxui.FilePreviewAction">
<result name="SUCCESS">filepreview.jsp</result>
<result name="JOBCREATED" type="redirect">Upload</result>
<result name="ERROR" type="redirect">ProcessLogin</result>
</action>
<action name="ServiceProviderProcess" class="com.mxui.ServiceProviderAction">
<result name="SUCCESS">CreateProvider.jsp</result>
<result name="serviceprovider" type="redirect">Upload</result>
</action>
<action name="UpdateServiceProviderProcess" class="com.mxui.UpdateServiceProviderAction">
<result name="SUCCESS">updateserviceprovider.jsp</result>
<result name="updated" type="redirect">Upload</result>
</action>
<action name="manage" class="com.mxui.ManageServiceProviderAction">
<result name="SUCCESS">manageserviceprovider.jsp</result>
</action>
</package>
<package extends="struts-default,json-default" name="name" namespace="">
<interceptor name="json" class="org.apache.struts2.json.JSONInterceptor" />
<action name="checkStatusAndNumRecs" class="com.mxui.checkStatusAndNumRecsAction" method="execute">
<result type="json"></result>
</action>
</package>
</struts>
在 JSP 页面中
$.ajax({
type: 'POST',
url: 'checkStatusAndNumRecs',
data:{fileId:fileId},
dataType: 'json',
async: false ,
contentType: 'application/json; charset=utf-8',
success: function(data){
alert(data);
var obj = jQuery.parseJSON(eval(data));->THis statement is not executing
alert("after JSON OBJECT"+obj.status);
$("#div1").html(obj.status);
$("#div2").html(obj.records);
},
error:function(data)
{
$("#div1").html("It was a failure !!!");
}
});
});
});
支柱.xml
将全局结果定义为
<result-type name="json" class="org.apache.struts2.json.JSONResult" default="false" />
对于操作
<package extends="struts-default,json-default" name="name" namespace="">
<interceptor name="json" class="org.apache.struts2.json.JSONInterceptor" />
<action name="YouAction" class="YourActionClass" method="executeMethod">
<result type="json"></result>
</action>
</package>
相关文章：
- 如何在不刷新页面的情况下更新显示框
- EXTJS-图表刷新，重绘-如何更新图表
- 如何检查Json文件更新，如果更新了，则用更新的数据刷新我的页面
- JQGrid使用服务器编辑后的更新数据刷新数据
- 实时更新，无需刷新页面
- ExtJS网格在存储更新后未刷新
- 在内容刷新或更新时调整iframe的大小
- 为什么我的 cshtml 页面的 javascript 没有在浏览器中更新/刷新
- HTML5 网址更新而不刷新
- 动态更新/刷新 KmlLayer
- Ember JS - 从路由操作更新/刷新模型数据
- yii2:使用 Pjax 更新/刷新/重新加载页面，与请求页面不同
- ExtJS 6 网格无法正确更新/刷新列标题
- 离子和角度 - 从控制器更新/刷新视图
- 更新/刷新JQuery移动滑块有效
- 只更新(刷新)PartialView提交后点击
- 使用站点更新刷新缓存
- ExtJS 4-更新/刷新单个记录
- 更新刷新函数中的挖空可观察字符串
- 如何在插入jQuery后更新/刷新DOM项
