JSP/Liferay 的 Jquery 进度条实现

Question

我对 JSP/Liferay portlet 开发还很陌生，我正在尝试使用 jQuery 添加进度条，我发现 这个问题，但并没有非常具体地说明如何使用 AJAX 来完成它。

我想知道是否有人可以为我指出正确的方向来帮助我开始。

谢谢。

编辑：

我使用了 JSON simple，并设法进行了一些更改，但我得到了错误的请求（使用 fire bug 时错误代码 400）和 404 在我的 JS 上找不到，

下面是我的代码：

public void processAction(
        ActionRequest actionRequest, ActionResponse actionResponse)
    throws IOException, PortletException {

//some code here


    this.generateJSON(actionRequest, actionResponse);//manual call the method?

 public void generateJSON(ActionRequest actionRequest, ActionResponse actionResponse)
    throws IOException, PortletException {
        try{
                        //just want to see a progress bar so do static for now...
            JSONObject obj=new JSONObject();
            obj.put("percent",new Integer(30));
            StringWriter out = new StringWriter();
            obj.writeJSONString(out);
            String jsonText = out.toString();
        }catch(Exception ex){
            System.out.print(ex);
        }
        }
    }//end of class

JS 这里

    function checkStatus(){
    $.ajax({
          type: 'POST',
          //url: '<%=request.getContextPath()%>/checkStatusServlet',
          url: '<%=request.getContextPath()%>/generateJSON',
          dataType: 'json',
          success: function( data )
          {
            alert(data.statusPercent);  
            var statusPercent = data.percent;
            //Update your jQuery progress bar   
            $( "#progressbar" ).progressbar({value: statusPercent});

          }
    });
    //below works and alert is being called...
    /*for (i=0;i<=5;i++)
    {
         $( "#progressbar" ).progressbar({value: i+10});
    }
    alert('got here');
    */
}

HTML/JSP

<%@ page import="javax.portlet.PortletPreferences" %>
<portlet:defineObjects/>
<portlet:renderURL var="resourceUrl"></portlet:renderURL>
<!-- Javascript files -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/main.js"></script>
<!-- end of Java script files -->
<script type="text/javascript">
    setTimeout('checkStatus()',1000);
</script>
<div id="progressbar"></div>

Answer 1

您无法在 processAction 中生成 JSON。此方法旨在更改 portlet 状态，但不生成输出。完成您需要的门户方式是使用serveResource 方法/生命周期阶段：您可以从门户获取此URL ()。具体来说，您不应该自己创建它们。

另一种选择（但不是门户方式）是使用 servlet - 但在这种情况下，您没有可能需要的 portlet 状态。

您可能想使用 < portlet:命名空间 // >消除全局名称的歧义 - 或使用正确的命名空间 - 因为您永远无法确定您的 portlet 将被放置在页面上多少次。

（向 jsp 标签添加空格，以便它们不会被标记吃掉）

简短：阅读有关 portlet 资源服务的内容，这很可能会解决您的根本问题：使用上面给出的代码，您将无法完全访问您的 JSON - 无论您在 JS 端做什么。

Answer 2

答案实际上取决于您的具体需求。您是否想显示某些任务实际剩余的时间，或者页面加载之前的时间或其他什么？

您可以从客户端进行轮询，并根据剩余处理量更新浏览器中的进度栏​​。一个简单的 jQuery ajax 示例：

function checkStatus
{
    $.ajax({
          type: 'POST',
          url: '<%=request.getContextPath()%>/checkStatusServlet',
          dataType: 'json',
          success: function( data )
          {
            var statusPercent = data.statusPercent;

            //Update your jQuery progress bar   
            $( "#progressbar" ).progressbar({value: statusPercent });
          }
    });
}

然后您可以简单地轮询该函数直到其完成

setTimeout('checkStatus()' 1000);

当然您还需要构造一个 servlet 或 struts 操作或 portlet 来处理服务器上的处理，并返回任务的适当状态。

编辑：

使用 JSON 库
来自您的 servlet 或操作。 （下面的代码来自struts2的action）

public String checkStatus()
{       
    try 
    {
        Integer percentDone = 50;  //Calculate how much time is left

        JSONObject statusResult = new JSONObject();

        statusResult.put("statusPercent", percentDone);

        //Obtain HttpServletResponse.. 
        //implementation depends on your framework. 
        //PortletResponse should work too.
        PrintWriter out = this.response.getWriter();
        out.write( statusResult.toString(4) );
        out.flush();
        out.close();
    }
    catch (IOException e) {} 
    catch (JSONException e) {}

    return null;
}