Skip to main content
 首页 » 编程设计

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

2025年05月04日128java哥

我是liferay门户的新手。我在 liferay 中开发了一个用于演示的 portlet。我在这个例子中使用了 portlet 间的通信。我正在做的是:- 我有一个搜索 portlet，其中有一个用于搜索的文本字段。当我单击搜索按钮时，它会从数据库中获取数据并使用包含在另一个 portlet 中的搜索来显示该数据。我在这个项目中使用了 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); 
 
}

请您参考如下方法:

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

javax.portlet.ResourceServingPortlet

GenericPortlet 已经这样做了，但您想覆盖它，而不是使用 <portlet:actionURL />你应该使用 <portlet:resourceURL />来自行动。

并且在您的设置中，您应该拥有带有关键字隐藏字段的搜索表单，并且在单击搜索 portlet 中的提交按钮时，您应该使用 IPC 将该表单中的关键字复制到搜索结果 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 
    } 
    ... 
}

编辑:完整示例

搜索表单 
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>

结果.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") %>


  文章来源：
  https://www.itguest.com/post/ihbjbj2b9.html
阅读延展