如何使用Liferay的Ajax请求提交表单？ [英] How to submit form using Ajax request in Liferay?

问题描述

我是新手在Liferay门户。我已经开发了在Liferay中的演示一个portlet。我用这个例子Portlet间通信。我在做什么是： - 我有一个搜索portlet中，我有一个文本框的搜索。当我点击搜索按钮，它从数据库中获取数据，并使用显示数据搜索，包含在另一个portlet。我用processEvent方法和ActionEvent的标注为这个项目。

现在我想是当我点击搜索按钮，然后在网页不应该刷新（即我希望使用AJAX）的概念和数据应在其他portlet中显示出来。

ç段 $ C $

的Portlet A - view.jsp的

 ＆LT;％@ include文件=/ HTML / init.jsp％＆GT;
＆LT;的portlet：defineObjects /＆GT;

＆LT;！ - 

＆LT; portlet中：actionURL VAR =actionURLNAME =pitchBall＆GT;＆LT; / portlet中：actionURL＆GT;

//  - ＆GT;
**更改为资源URL **
＆LT; portlet中：resourceURL VAR =resourceURL＆GT;
＆LT; / portlet中：resourceURL＆GT;


＆LT; AUI：形式方法=POST行动=＆LT;％= resourceURL％＆gt;中NAME =＆LT; portlet中：命名空间＆GT; FM1＆LT; / portlet中：命名空间＆GT;＆GT;
    ＆LT; AUI：输入名称=搜索ID =搜索/＆GT;
    ＆LT; AUI：按钮类型=提交名称=搜索的价值=搜索/＆GT;
＆LT; / AUI：形式GT;
 

的Portlet A - SearchPortlet类

  com.test包;

/ **
 * Portlet的实现类SearchPortlet
 * /
公共类SearchPortlet扩展的GenericPortlet {

    @覆盖
    公共无效渲染（RenderRequest中的请求，响应的renderResponse）
            抛出PortletException，IOException异常{
        // TODO自动生成方法存根
        super.render（请求，响应）;

    }

    @ProcessAction（NAME =pitchBall）
    公共无效pitchBall（ActionRequest里要求，ActionResponse响应）抛出SystemException的{
        字符串名称= ParamUtil.getString（请求，搜索）;
        QName的QNAME =新QName（http://liferay.com/events，ipc.pitch）;
        response.setEvent（QNAME，姓名）;
    }

    公共无效的init（）{
        editJSP =的getInitParameter（编辑 -  JSP）;
        helpJSP =的getInitParameter（求助JSP）;
        viewJSP =的getInitParameter（视图 -  JSP）;
    }

    公共无效的doEdit（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
        抛出IOException异常，PortletException {

        包括：（editJSP，RenderRequest中，的renderResponse）;
    }

    公共无效doHelp（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
        抛出IOException异常，PortletException {

        包括：（helpJSP，RenderRequest中，的renderResponse）;
    }

    @覆盖
    公共无效的doView（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
        抛出IOException异常，PortletException {
        //super.doView(renderRequest，的renderResponse）;
        的System.out.println（在的doView code）;

        renderResponse.setContentType（renderRequest.getResponseContentType（））;

        //文件显示...
        字符串URL =/html/searchportlet/view.jsp;

        //读取上面的文件，并将其输出...
        getPortletContext（）的getRequestDispatcher（URL）.INCLUDE（RenderRequest中，的renderResponse）。
        //包括（viewJSP，RenderRequest中，的renderResponse）;
    }

    @覆盖
    公共无效的serveResource（ResourceRequest要求，ResourceResponse响应）
            抛出PortletException，IOException异常{
        // TODO自动生成方法存根
        //super.serveResource(request，响应）;
         的System.out.println（在的serveResource code）;

         response.setContentType（text / html的）;

         字符串名称=的request.getParameter（搜索）;

         //这似乎是在呼唤的网页...？
         字符串RESOURCEID = request.getResourceID（）;
         的System.out.println（RESOURCEID是：+ RESOURCEID）;


         的System.out.println（信息是：+姓名）;
         PrintWriter的作家= response.getWriter（）;

         writer.print（名称）;
    }

    保护无效包括：（
            字符串路径，RenderRequest中的RenderRequest，
            的renderResponse的renderResponse）
        抛出IOException异常，PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            。getPortletContext（）的getRequestDispatcher（路径）;

        如果（portletRequestDispatcher == NULL）{
            _log.error（路径+不是有效的包括）;
        }
        其他 {
            portletRequestDispatcher.include（RenderRequest中，的renderResponse）;
        }
    }

    保护字符串editJSP;
    保护字符串helpJSP;
    保护字符串viewJSP;

    私有静态日志_log = LogFactoryUtil.getLog（SearchPortlet.class）;

}
 

的Portlet乙 - view.jsp的

 ＆LT;％@ include文件=/ HTML / init.jsp％＆GT;
＆LT;的portlet：defineObjects /＆GT;

＆LT;％
字符串名称=（字符串）renderRequest.getParameter（姓名）;
％＆GT;

＆LT; Liferay的-UI：搜索容器
    emptyResultsMessage =作者 - 空结果消息＆GT;

    ＆LT; Liferay的-UI：搜索容器结果
        结果=＆其中;％= KeyurAuthorLocalServiceUtil.getStudentByName（名称）％＆gt;中/＆GT;

    ＆LT; Liferay的-UI：搜索容器排的className =com.test.model.KeyurAuthor＆GT;

        ＆LT; Liferay的-UI：搜索容器列文字名称=AUTHORID
            属性=AUTHORID/＆GT;
        ＆LT; Liferay的-UI：搜索容器列文字名称=AUTHORNAME
            属性=AUTHORNAME/＆GT;
        ＆LT; Liferay的-UI：搜索容器列文字名称=authorEmail
            属性=authorEmail/＆GT;
    ＆LT; / Liferay的-UI：搜索容器排＆GT;

    ＆LT; Liferay的-UI：搜索迭代器＆GT;＆LT; / Liferay的-UI：搜索迭代器＆GT;


＆LT; / Liferay的-UI：搜索容器＆GT;
 

的Portlet乙 - SearchResultPortlet类

  / **
 * Portlet的实现类SearchResultPortlet
 * /
公共类SearchResultPortlet扩展的GenericPortlet {

    公共无效的init（）{
        editJSP =的getInitParameter（编辑 -  JSP）;
        helpJSP =的getInitParameter（求助JSP）;
        viewJSP =的getInitParameter（视图 -  JSP）;
    }

    @ProcessEvent（qname的={http://liferay.com/events}ipc.pitch）
    公共无效catchBall（EventRequest要求，显示eventResponse响应）{
        事件事件= request.getEvent（）;
        字符串名称=（字符串）event.getValue（）;
        response.setRenderParameter（姓名，名）;
    }

    公共无效的doEdit（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
    抛出IOException异常，PortletException {

        包括：（editJSP，RenderRequest中，的renderResponse）;
    }

    公共无效doHelp（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
    抛出IOException异常，PortletException {

        包括：（helpJSP，RenderRequest中，的renderResponse）;
    }

    公共无效的doView（
            RenderRequest中的RenderRequest，的renderResponse的renderResponse）
    抛出IOException异常，PortletException {

        包括：（viewJSP，RenderRequest中，的renderResponse）;
    }

    保护无效包括：（
            字符串路径，RenderRequest中的RenderRequest，
            的renderResponse的renderResponse）
    抛出IOException异常，PortletException {

        PortletRequestDispatcher portletRequestDispatcher =
            。getPortletContext（）的getRequestDispatcher（路径）;

        如果（portletRequestDispatcher == NULL）{
            _log.error（路径+不是有效的包括）;
        }
        其他 {
            portletRequestDispatcher.include（RenderRequest中，的renderResponse）;
        }
    }

    保护字符串editJSP;
    保护字符串helpJSP;
    保护字符串viewJSP;

    私有静态日志_log = LogFactoryUtil.getLog（SearchResultPortlet.class）;

}
 

解决方案

在门户网站上做Ajax请求的Portlet应该implemet

  javax.portlet.ResourceServingPortlet
 

的GenericPortlet已经这样做了，但要覆盖它，而不是使用＆LT;的portlet：actionURL /＆GT; 你应该使用＆LT;的portlet ：resourceURL /＆GT; 来回回从行动

。

而在你的设置，你应该有搜索表单隐藏字段的关键词，并点击提交按钮，在搜索portlet，你应该从形式复制关键字，符合IPC，在搜索结果的portlet并调用提交的搜索结果（无在搜索portlet（A））提交表单。

您SearchResultPortlet类应该是

 公共类SearchResultPortlet扩展的GenericPortlet {
    ...
    公共无效的serveResource（ResourceRequest要求，ResourceResponse响应）抛出PortletException，产生java.io.IOException {
       //做搜索和返回结果
    }
    ...
}
 

编辑：完整的例子

SearchForm

 进口java.io.IOException异常;

进口javax.portlet.GenericPortlet;
进口javax.portlet.PortletException;
进口javax.portlet.RenderRequest;
进口javax.portlet.RenderResponse;

公共类SearchForm扩展的GenericPortlet {

    @覆盖
    保护无效的doView（RenderRequest中p_request，的renderResponse p_response）抛出PortletException，IOException异常{
        。getPortletContext（）的getRequestDispatcher（/ WEB-INF / JSP / search.jsp的），包括（p_request，p_response）;
    }
}
 

信息搜索结果

 进口java.io.IOException异常;

进口javax.portlet.GenericPortlet;
进口javax.portlet.PortletException;
进口javax.portlet.RenderRequest;
进口javax.portlet.RenderResponse;
进口javax.portlet.ResourceRequest;
进口javax.portlet.ResourceResponse;

公共类信息搜索结果扩展的GenericPortlet {

    @覆盖
    保护无效的doView（RenderRequest中p_request，的renderResponse p_response）抛出PortletException，IOException异常{
        。getPortletContext（）的getRequestDispatcher（/ WEB-INF / JSP / result.jsp中），包括（p_request，p_response）;
    }

    @覆盖
    公共无效的serveResource（ResourceRequest p_request，ResourceResponse p_response）抛出PortletException，IOException异常{
                    //做你的搜索位置，并把结果在结果
        p_request.setAttribute（结果，结果：+ p_request.getParameter（搜索））;

        。getPortletContext（）的getRequestDispatcher（/ WEB-INF / JSP / html.jsp）包括：（p_request，p_response）;
    }
}
 

search.jsp的

 ＆LT;％@页面语言=Java的的contentType =text / html的;字符集= UTF-8的pageEncoding =UTF-8％＆GT;

＆LT;％@标签库的uri =htt​​p://java.sun.com/portletpreFIX =portlet的％＆GT;

＆LT;的portlet：defineObjects /＆GT;

＆LT;脚本类型=文/ JavaScript的＆GT;

    传播doSearch（）{
        Liferay.fire（'searchKeywords'的document.getElementById（＆LT;的portlet：空间/＆GT;搜索。）值）;
    }

＆LT; / SCRIPT＆GT;

＆LT;形式GT;
    ＆LT;输入类型=文本名称=搜索ID =＆LT;的portlet：空间/＆GT;搜索/＆GT;
    ＆LT;按钮名称=搜索的价值=搜索的onclick =doSearch（）类型=按钮＆GT;搜索＆LT; /按钮＆GT;
＆LT; /形式GT;
 

result.jsp中

 ＆LT;％@页面语言=Java的的contentType =text / html的;字符集= UTF-8的pageEncoding =UTF-8％＆GT;

＆LT;％@标签库的uri =htt​​p://java.sun.com/portletpreFIX =portlet的％＆GT;
＆LT;％@标签库的uri =htt​​p://liferay.com/tld/auipreFIX =AUI％＆GT;

＆LT;的portlet：defineObjects /＆GT;
＆LT; portlet中：resourceURL VAR =RURL/＆GT;

＆LT;脚本类型=文/ JavaScript的＆GT;
    Liferay.on（'searchKeywords'，功能（事件，P_DATA）{
        VAR A = AUI（）;
        a。使用（'AUI-IO请求'功能（AUI）{
            A.io.request（＆其中;％= RURL％＆gt;中，{
                方法：POST，
                数据：{搜索：P_DATA}，
                数据类型：HTML，
                上 ： {
                    成功：函数（）{
                        AUI（）酮（＃＆所述; portlet中：命名空间/＆GT;占位符）。HTML（this.get（'responseData'））;。
                    }
                }
            }）;
        }）;
    }）;
＆LT; / SCRIPT＆GT;

搜索结果：其中; BR /＆GT;
＆LT; D​​IV ID =＆LT;的portlet：空间/＆GT;占位符＆GT;
＆LT; / DIV＆GT;
 

html.jsp（这是用于渲染的结果）

 ＆LT;％= request.getAttribute（结果）％＆GT;
 

I am newbie in liferay portal. I have developed one portlet in liferay for demo. I used inter portlet communication in this example. What i am doing is:- I have one search portlet in which i am having one textfield for search. When i click on search button it fetches the data from the database and display that data using search-contained in another portlet. I used ProcessEvent and ActionEvent annotation for this project.

Now what i want is when i click on the search button then the page should not be refresh(i.e i wish to use the concept of AJAX) and data should be displayed on the other portlet.

Code Snippet

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 Class

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 Class

/**
 * 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);

}

解决方案

When making ajax requests on portal your portlet should implemet

javax.portlet.ResourceServingPortlet

GenericPortlet already does but you want to override it, and instead of using <portlet:actionURL /> you should use <portlet:resourceURL /> fro from action.

And in your setup you should have search form with hidden field for keywords, and on clicking submit button in search portlet you should copy keywords from that form, with IPC, to search results portlet and invoke submit on search result from (without submitting form in search portlet (A)).

Your SearchResultPortlet class should be

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

EDIT: complete example

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

SearchResult

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

search.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 (this is for rendering results)

<%= request.getAttribute("result") %>

这篇关于如何使用Liferay的Ajax请求提交表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！