JSP/Liferay 的 Jquery 进度条实现

Question

我是 JSP/Liferay portlet 开发的新手，我正在尝试使用 jQuery 添加进度条，我找到了this question，但并没有具体说明如何使用 AJAX 来完成。

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

谢谢。

编辑：

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

下面是我的代码：

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 将在页面上放置多少次。

（在 jsp-tags 中添加空格，这样它们就不会被标记吃掉）

简短：阅读有关 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 library 从您的 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;
}