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 h
});
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:form>
<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();"/>
</aui:form>
Step:2 - Create resourceURL:
<portlet:resourceURL var="saveData" id="saveData" ></portlet:resourceURL>
Step:3 - Add AUI script to perform AJAX operations:
<aui:script>
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');
A.io.request('<%=saveData%>',{
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
}
}
});
});
}
</aui:script>
Step:4 - Write a resource method to handle AJAX request:
@ResourceMapping(value="saveData")
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();
out.print(obj.toString());
Step:6 - Receive response data on success in script:
on: {
success: function() {
var data=this.get('responseData');
var msg = data.message;
alert(msg);
}
}
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)
Download:
Distribution File(WAR)