Send some data to serveResource method and get data return as response using json object by Ajax call in Liferay Part II

Step 1: Create one portlet plugin project , portlet name in this example ajaxExamples, inside this portlet plugin project create one portlet
name alloyajax

Step 2 : Paste below code in portet view.jsp

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

<p style="color:green;"> Ajax using Alloy UI in Liferay</p>


<portlet:resourceURL var="saveDataUrl"/>

<aui:form>
          <aui:input type="text" name="Name" id="NAME"/>
          <aui:input type="text" name="Email" id="EMAIL"/>

          <aui:button type="button" name="saveButton"  value="Ajax Test" onclick="save();" />
</aui:form>


 <aui:script>
function save(){
    AUI().use('aui-base','aui-io-request', function(A){
       
        var name=A.one("#<portlet:namespace />NAME").get('value');
        var email=A.one("#<portlet:namespace />EMAIL").get('value');
        

        A.io.request('<%=saveDataUrl%>',{
            dataType: 'json',
            method: 'POST',
            data: { <portlet:namespace/>name: name,
                     <portlet:namespace/>email: email},
            on: {
            success: function() {
                var data=this.get('responseData');
                // Actions to be performed on success
                var dataReceivedSuccess = data.dataReceivedMessage;
                var UserName = data.UserName;
                var UserEmail = data.UserEmail;
                alert("Data Received Message: "+dataReceivedSuccess);
                alert("User Name :"+UserName);
                alert("User Email :"+UserEmail);
             
                }
            }
        });
   
    });
}
</aui:script>

EXPLANATION : In above code we have created one resourceUrl and one form with two input fields Name and Email.
After that we have written script using Alloy ui and inside script we are getting form fields value  shown below
    var name=A.one("#<portlet:namespace />NAME").get('value');
    var email=A.one("#<portlet:namespace />EMAIL").get('value');
after getting value we are passing this as data with resource url using  A.io.request('<%=saveDataUrl%>',others parameter); method and
calling serverResource method.   


Step 3: Paste below code in portlet controller class AlloyAjax.java

package com.test;

import java.io.IOException;
import java.io.PrintWriter;

import javax.portlet.PortletException;
import javax.portlet.ResourceRequest;
import javax.portlet.ResourceResponse;

import com.liferay.portal.kernel.json.JSONFactoryUtil;
import com.liferay.portal.kernel.json.JSONObject;
import com.liferay.util.bridges.mvc.MVCPortlet;

/**
 * Portlet implementation class AlloyAjax
 */
public class AlloyAjax extends MVCPortlet {

@Override
public void serveResource(ResourceRequest resourceRequest,
        ResourceResponse resourceResponse) throws IOException,
        PortletException {
    
    System.out.println("inside resource method for testing ajax call using resource url");
    
     String name = resourceRequest.getParameter("name");
     String emailId = resourceRequest.getParameter("email");
     
     JSONObject jsonobj =  JSONFactoryUtil.createJSONObject();
     jsonobj.put("dataReceivedMessage","Data Received Successfully");
     jsonobj.put("UserName", name);
     jsonobj.put("UserEmail", emailId);
     
     PrintWriter printout=resourceResponse.getWriter();
     printout.print(jsonobj.toString());    
}    
}

EXPLANATION : In above code we are getting input fields value which we have passed with resource url , and after getting value we just
sending that value as response using json object.

Output :