logo标签列表

如何在Liferay中使用Ajax请求提交表单？

ajaxliferayliferay-6
16

我是liferay门户网站的新手。我在liferay中为演示开发了一个portlet，该示例中使用了portlet间通信。我的做法是：我有一个搜索portlet，在其中有一个用于搜索的文本字段。当我点击搜索按钮时，它会从数据库中获取数据，并使用另一个portlet中的search-contained显示该数据。我在此项目中使用ProcessEvent和ActionEvent注释。

现在我想要的是，当我点击搜索按钮时，页面不应该刷新（即我希望使用AJAX的概念），并且数据应显示在另一个portlet中。

代码片段

Portlet A - view.jsp

<%@include file="/html/init.jsp"%>
<portlet:defineObjects />

<!--

<portlet:actionURL var="actionURL" name="pitchBall"></portlet:actionURL>

//-->
**Change to Resource URL**
<portlet:resourceURL var="resourceURL">
</portlet:resourceURL>


<aui:form method="POST" action="<%= resourceURL%>" name="    <portlet:namespace>fm1</portlet:namespace>">
    <aui:input name="search" id="search" />
    <aui:button type="submit" name="Search" value="Search" />
</aui:form>

Portlet A - SearchPortlet类

package com.test;

/**
 * Portlet implementation class SearchPortlet
 */
public class SearchPortlet extends GenericPortlet {

    @Override
    public void render(RenderRequest request, RenderResponse response)
            throws PortletException, IOException {
        // TODO Auto-generated method stub
        super.render(request, response);

    }

    @ProcessAction(name="pitchBall") 
    public void pitchBall(ActionRequest request, ActionResponse response) throws SystemException {
        String name = ParamUtil.getString(request, "search");       
        QName qName = new QName("http://liferay.com/events", "ipc.pitch");
        response.setEvent(qName, name);
    }

    public void init() {
        editJSP = getInitParameter("edit-jsp");
        helpJSP = getInitParameter("help-jsp");
        viewJSP = getInitParameter("view-jsp");
    }

    public void doEdit(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {

        include(editJSP, renderRequest, renderResponse);
    }

    public void doHelp(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {

        include(helpJSP, renderRequest, renderResponse);
    }

    @Override
    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
        throws IOException, PortletException {
        //super.doView(renderRequest, renderResponse);
        System.out.println("In doView code");

        renderResponse.setContentType(renderRequest.getResponseContentType());

        // file to display...
        String url = "/html/searchportlet/view.jsp";

        // read the above file and output it...
        getPortletContext().getRequestDispatcher(url).include(renderRequest, renderResponse);
        //include(viewJSP, renderRequest, renderResponse);
    }

    @Override
    public void serveResource(ResourceRequest request, ResourceResponse response)
            throws PortletException, IOException {
        // TODO Auto-generated method stub
        //super.serveResource(request, response);
         System.out.println("In serveResource code");

         response.setContentType("text/html");

         String name = request.getParameter("search");

         // this seems to be the page that was calling...?
         String resourceID = request.getResourceID();
         System.out.println("resourceId was : " + resourceID);


         System.out.println("message was : " + name);
         PrintWriter writer = response.getWriter();

         writer.print(name);
    }

    protected void include(
            String path, RenderRequest renderRequest,
            RenderResponse renderResponse)
        throws IOException, PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            getPortletContext().getRequestDispatcher(path);

        if (portletRequestDispatcher == null) {
            _log.error(path + " is not a valid include");
        }
        else {
            portletRequestDispatcher.include(renderRequest, renderResponse);
        }
    }

    protected String editJSP;
    protected String helpJSP;
    protected String viewJSP;

    private static Log _log = LogFactoryUtil.getLog(SearchPortlet.class);

}

Portlet B - view.jsp

<%@include file="/html/init.jsp"%>
<portlet:defineObjects />

<%
String name = (String)renderRequest.getParameter("name");
%>

<liferay-ui:search-container
    emptyResultsMessage="author-empty-results-message">

    <liferay-ui:search-container-results
        results="<%= KeyurAuthorLocalServiceUtil.getStudentByName(name) %>" />

    <liferay-ui:search-container-row className="com.test.model.KeyurAuthor">

        <liferay-ui:search-container-column-text name="authorId"
            property="authorId" />
        <liferay-ui:search-container-column-text name="authorName"
            property="authorName" />
        <liferay-ui:search-container-column-text name="authorEmail"
            property="authorEmail" />
    </liferay-ui:search-container-row>

    <liferay-ui:search-iterator></liferay-ui:search-iterator>


</liferay-ui:search-container>

Portlet B - SearchResultPortlet类

/**
 * Portlet implementation class SearchResultPortlet
 */
public class SearchResultPortlet extends GenericPortlet {

    public void init() {
        editJSP = getInitParameter("edit-jsp");
        helpJSP = getInitParameter("help-jsp");
        viewJSP = getInitParameter("view-jsp");
    }

    @ProcessEvent(qname="{http://liferay.com/events}ipc.pitch")
    public void catchBall(EventRequest request, EventResponse response) {
        Event event = request.getEvent();
        String name = (String)event.getValue();
        response.setRenderParameter("name", name);
    }

    public void doEdit(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(editJSP, renderRequest, renderResponse);
    }

    public void doHelp(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(helpJSP, renderRequest, renderResponse);
    }

    public void doView(
            RenderRequest renderRequest, RenderResponse renderResponse)
    throws IOException, PortletException {

        include(viewJSP, renderRequest, renderResponse);
    }

    protected void include(
            String path, RenderRequest renderRequest,
            RenderResponse renderResponse)
    throws IOException, PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            getPortletContext().getRequestDispatcher(path);

        if (portletRequestDispatcher == null) {
            _log.error(path + " is not a valid include");
        }
        else {
            portletRequestDispatcher.include(renderRequest, renderResponse);
        }
    }

    protected String editJSP;
    protected String helpJSP;
    protected String viewJSP;

    private static Log _log = LogFactoryUtil.getLog(SearchResultPortlet.class);

}
3个回答
18

在门户上进行ajax请求时，您的portlet应该实现

javax.portlet.ResourceServingPortlet

GenericPortlet已经实现了这个功能，但是您想要覆盖它，而且不应该使用<portlet:actionURL />，而是应该在操作中使用<portlet:resourceURL />。

在您的设置中，您应该有一个带有关键字隐藏字段的搜索表单，并在搜索 portlet 中单击提交按钮时将关键字从该表单复制到搜索结果 portlet 中，并在其中调用提交（而无需提交搜索 portlet 中的表单(A)）。

您的SearchResultPortlet类应该为

public class SearchResultPortlet extends GenericPortlet {
    ...
    public void serveResource(ResourceRequest request, ResourceResponse response) throws PortletException, java.io.IOException {
       // do search and return result
    }
    ...
}

编辑：完整示例

SearchForm（搜索表单）

import java.io.IOException;

import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;

public class SearchForm extends GenericPortlet {

    @Override
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException {
        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/search.jsp").include(p_request, p_response);
    }
}

搜索结果

import java.io.IOException;

import javax.portlet.GenericPortlet;
import javax.portlet.PortletException;
import javax.portlet.RenderRequest;
import javax.portlet.RenderResponse;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

public class SearchResult extends GenericPortlet {

    @Override
    protected void doView(RenderRequest p_request, RenderResponse p_response) throws PortletException, IOException {
        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/result.jsp").include(p_request, p_response);
    }

    @Override
    public void serveResource(ResourceRequest p_request, ResourceResponse p_response) throws PortletException, IOException {
                    //do your search here and put results in 'result'
        p_request.setAttribute("result", "results for: " + p_request.getParameter("search"));

        getPortletContext().getRequestDispatcher("/WEB-INF/jsp/html.jsp").include(p_request, p_response);
    }
}

搜索.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>

<portlet:defineObjects />

<script type="text/javascript">

    function doSearch() {
        Liferay.fire('searchKeywords', document.getElementById("<portlet:namespace/>search").value);    
    }

</script>

<form>
    <input type="text" name="search" id="<portlet:namespace/>search" />
    <button name="Search" value="Search" onclick="doSearch()" type="button">Search</button>
</form>

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>

<portlet:defineObjects />
<portlet:resourceURL var="rurl" />

<script type="text/javascript">
    Liferay.on('searchKeywords', function(event, p_data){
        var A = AUI(); 
        A.use('aui-io-request', function(aui) {
            A.io.request("<%= rurl %>", { 
                method : 'POST', 
                data: {search: p_data},
                dataType : 'html', 
                on : { 
                    success : function() { 
                        AUI().one("#<portlet:namespace/>placeholder").html(this.get('responseData'));
                    } 
                } 
            });
        });
    });
</script>

Search Results:<br />
<div id="<portlet:namespace/>placeholder">
</div>

html.jsp（这用于呈现结果）

<%= request.getAttribute("result") %>
谢谢你的回复。我仍然有疑问。我该如何将我的文本框和隐藏域的值传递到其他 Portlet？它正在使用 ActionRequest 和 Response，所以它会刷新页面。你能否提供更多详细信息… - Scorpion
还有一件事我想指出的是，如果我将它从“action”更改为“resourceURL”，那么它将调用SearchPortlet的serveResource方法。但现在从那里如何使用IPC将其传递到其他portlet？ - Scorpion
1

在客户端上，您可以使用Inter portlet通信。

假设您正在使用Liferay 6+，我们将称portletA为搜索portlet，portletB为包含在另一个portlet中的搜索。

步骤1：单击portletA上的搜索按钮将在浏览器上触发以下javascript函数：

var A = AUI(); 
A.use('aui-io-request', 
    function(aui) {
        A.io.request(<portletA_serch_action_url>, { 
            method : 'GET', 
            dataType : 'json', 
            on : { 
                success : function() { 
                    Liferay.fire('myEvent', this.get('responseData');                    
                } 
            } 
        });
    }
);

注意调用A.io.request(<portletA_serch_action_url>...这是portletA服务器端的动作URL。有关Liferay 6和ajax的更多信息，请参阅以下Liferay博客：http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-ajax。

第二步：在portletA服务器响应时，portletA客户端将使用从服务器检索到的数据启动一个事件。 注意调用Liferay.fire('myEvent', this.get('responseData');这是Liferay支持客户端间端口通信的方式（请参阅http://www.liferay.com/community/wiki/-/wiki/Main/Client-side+Inter-Portlet+Communication）。

myEvent是触发的事件，this.get('responseData');是从服务器检索到的数据。

第三步：客户端portletB监听myEvent并渲染数据。

portletB 将侦听 myEvent 然后呈现数据：

Liferay.on(
 'myEvent',
 function(event, data){
   var portletId = data.portletId;
   var portlet = data.portlet;

   if(portletId.indexOf('YOUR_PORTLET_A_ID') > -1){
        alert(data);
   }
 }
 );

注意检查PortletA数据的来源：

   if(portletId.indexOf('YOUR_PORTLET_A_ID') > -1){...

如果您没有其他Portlet触发相同的事件，您可以删除该检查。

希望这可以帮到您。

感谢您的友好和快速回复。我会尝试这个方法，希望它能够顺利运行。 - Scorpion
我已经添加了一些代码片段，你能否请看一遍并告诉我哪里出错了以及应该怎么做？谢谢。 - Scorpion
0

--------------------------JSP 代码--------------------

  <portlet:resourceURL var="testAjaxResourceUrl"></portlet:resourceURL>

    <form id="testAjaxForm" action="">
        <input type="text" name="<portlet:namespace />param2">
        <input type="button" value="Submit" onclick="ajaxCall()">
    </form>
    
    <script type="text/javascript">
    function ajaxCall(){
       AUI().use('aui-base', 'io', 'aui-io-request', function(A){
            A.io.request('${testAjaxResourceUrl}', {
                   method: 'post',
                   data: {
                       <portlet:namespace />sampleParam: 'value2',
                   },
                   form:{
                       id:'testAjaxForm'
                   },
                   on: {
                           success: function() {
                            alert(this.get('responseData'));
                       }
                  }
            });
        });
    }
    </script>

----------------------Java 代码-----------------------------

    @Override
            public void serveResource(ResourceRequest resourceRequest, ResourceResponse resourceResponse)
                    throws IOException, PortletException {
                
                
             String param = ParamUtil.getString(resourceRequest, "param2");
               
               System.out.println("Parameter is ==>" + param);
               
                resourceResponse.setContentType("text/html");
                PrintWriter out = resourceResponse.getWriter();
                out.print("You have entered ==>"+param);
                System.out.println("Ajax call is performed");
                out.flush();
                super.serveResource(resourceRequest, resourceResponse);
            }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接