【问题标题】:Refreshing (updating) individual rows of a table with the data returned by the action class using ajax call使用 ajax 调用使用操作类返回的数据刷新(更新)表的各个行
【发布时间】:2013-11-18 06:14:38
【问题描述】:

这么多天以来,我一直在努力完成这项工作,但我失败了。 在下面看看我的jsp:

这里我有一个表,每行都有刷新图标,我想在单击图标时刷新单个行。

onclick 我正在调用一个函数->refreshRecord(value); 值(参数)是文件 ID(唯一)->即我作为参数传递给函数的表的第一列。

ajax 使用fileId 调用checkStatusAndNumRecs aciton,在动作类中我调用我的JPA 方法从数据库中获取数据,它使用fileId 读取我通过的行并将其放入JSONObject

在 ajax 部分的 jsp 中,它的执行有时会成功,而在大多数情况下,它的执行都会出错, 当它成功时,在成功部分,它无法执行此行->var obj = jQuery.parseJSON(eval(data));

这意味着有时数据会返回到 ajax,有时数据不会从动作类返回到 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>

【问题讨论】:

  • 不,它不工作我已经包含了警报有时我能够在警报中看到数据,有时它显示为空..
  • @pikrut 是的,我正在使用 struts2。
  • 我认为您正在使用 struts。 struts ajax 支持不同
  • 好的,我将使用 struts2 发布 ajax 操作

标签: java javascript ajax jsp jpa


【解决方案1】:

在 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 !!!");
        }
        });
        });
      });

Struts.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>

【讨论】:

  • SEVERE:元素类型“package”的内容必须匹配“(result-types?,interceptors?,default-interceptor-ref?,default-action-ref?,default-class-ref? ,global-results?,global-exception-mappings?,action*)”。在 (null:62:14) org.xml.sax.SAXParseException: 元素类型“包”的内容必须匹配“(result-types?,interceptors?,default-interceptor-ref?,default-action-ref?, default-class-ref?,global-results?,global-exception-mappings?,action*)”。我得到这个错误应用程序没有运行。
  • 我在 struts.xml 中添加了这个
  • 是的,应该是成功的,答案编辑请检查。
  • 不知道为什么它给出 404 错误请求的资源未找到
  • 我可以发布我的 struts.xml 文件
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-29
  • 2019-11-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多