« Back to Blogs

Alloy UI AJAX with Liferay

Nowadays AJAX is used widely in web applications. It is a front-end technology that lets a script written on front-end, communicate with server without whole page refresh.
Alloy UI provides a plugin to use AJAX in web applications. AUI provides Ajax in aui-io-request module. Signature for aui-io-request is like below:
AUI().use('aui-base','aui-io-request', function(A){
    // Ajax operations are written here
Prerequisite: Knowledge of Spring MVC Liferay portlet is required to understand this blog.
I am going to show how to use AUI ‘aui-io-request’ for AJAX in a Spring MVC Liferay portlet.
I am going to create a JSP page with AUI form and submit data of form to a controller using Alloy UI AJAX. I am also going to show a way of sending data back to script on the page from the controller in JSON format.
Step:1 - Create AUI form in jsp page:
          <aui:input type="text" name="Name" id="studentName"/>
          <aui:input type="text" name="Email" id="studentEmail"/>
          <aui:input type="text" name="ContactNo" id="studentPhone"/>
          <aui:button type="button" name="saveButton"  value="Save" onclick="save();" />
Step:2 - Create resourceURL:
<portlet:resourceURL var="saveData" id="saveData" ></portlet:resourceURL>
Step:3 - Add AUI script to perform AJAX operations:
function save(){
    AUI().use('aui-base','aui-io-request', function(A){
        var name=A.one("#<portlet:namespace />studentName").get('value');
        var email=A.one("#<portlet:namespace />studentEmail").get('value');
        var contact=A.one("#<portlet:namespace />studentPhone").get('value');
             dataType: 'json',
             method: 'POST',
             data: { <portlet:namespace/>name: name,
                      <portlet:namespace/>email: email,
                      <portlet:namespace/>contact: contact},
             on: {
             success: function() {
                 var data=this.get('responseData');
                 // Actions to be performed on success
Step:4 - Write a resource method to handle AJAX request:
public void saveData(ResourceRequest resourceRequest,ResourceResponse resourceResponse,Model model){
        String name = resourceRequest.getParameter("name");
        String emailId = resourceRequest.getParameter("email");
        String contact = resourceRequest.getParameter("contact");
After receiving data in a Java class, any database CRUD operations can be performed using that data.
Step:5 - Return data in JSON format from resource method to front-end:
JSONObject obj =  JSONFactoryUtil.createJSONObject();
obj.put("message","Data Received Successfully");
PrintWriter out=resourceResponse.getWriter();
Step:6 - Receive  response data on success in script:
on: {
success: function() {
var data=this.get('responseData');
           var msg = data.message;
Given example is for ‘POST’ method.
The Same signature can be used for ‘GET’ method that returns JSON data to front-end. (e.g. Content Auto updation)
contact-us Request a callback WhatsApp