Question

我对JSP / Liferay portlet开发很新，我正在尝试使用jQuery添加进度条，我发现this question但是对于如何使用AJAX完成它并不是非常具体。 / p>

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

感谢。

编辑：

我使用了JSON simple，并设法进行了一些更改但是我收到了一个错误的请求（使用火灾时出现错误代码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（＆lt; portlet：resourceURL /＆gt;）。具体来说，你不应该自己创建它们。

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

你可能想要使用＆lt; portlet：namespace /＆gt;消除全局名称的歧义 - 或者使用正确的命名空间 - 因为你永远不能说你的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动作）

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;
}

JSP / Liferay的Jquery进度条实现

2 个答案: