JQuery Integration Tutorials and Guide

This tutorial demonstrates how to integrate Spring MVC and jQuery for developing a web application. This example uses jQuery front end for getting the data from Spring MVC controller. Also the data is used in the text box for the auto completion feature. If you have any questions, please write it in the comments section.

also read:

Introduction to Spring MVC

Spring MVC + AngularJS Integration

Introduction To Spring MVC Test Framework

Spring and JSF Integration

1. Spring MVC Controller

CompanyController.java
This is the implementation of Spring MVC controller which is accessed by the jQuery.

[code lang=”java”]
package javabeat.net.spring.mvc;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javabeat.net.spring.dao.DataStore;
import javabeat.net.spring.model.Company;

@Controller
public class CompanyController {
private static DataStore dataStore = new DataStore();

@RequestMapping(value = "/index", method = RequestMethod.GET)
public ModelAndView index() {

Company userForm = new Company();

return new ModelAndView("company", "companyForm", userForm);
}

@RequestMapping(value = "/get_ceos_list",
method = RequestMethod.GET,
headers="Accept=*/*")
public @ResponseBody List<String> getCountryList(@RequestParam("term") String query) {
List<String> countryList = dataStore.getCeosList(query);

return countryList;
}

@RequestMapping(value = "/get_co_list",
method = RequestMethod.GET,
headers="Accept=*/*")
public @ResponseBody List<String> getCoList(@RequestParam("term") String query) {
List<String> countryList = dataStore.getCoList(query);

return countryList;
}
}

[/code]

Company.java

[code lang=”java”]
package javabeat.net.spring.model;

public class Company {
private String ceos;
private String companies;
public String getCeos() {
return ceos;
}
public void setCeos(String ceos) {
this.ceos = ceos;
}
public String getCompanies() {
return companies;
}
public void setCompanies(String companies) {
this.companies = companies;
}
}

[/code]

DataStore.java
Here we are storing few sample data that will be used by the controller.

[code lang=”java”]
package javabeat.net.spring.dao;

import java.util.ArrayList;
import java.util.List;
import java.util.StringTokenizer;

public class DataStore {
private List<String> ceos;
private List<String> companies;

public DataStore() {

String data = "Steve Jobs, Bill Gates, Dell, Larry Ellision, Lary Page, Sergy Brin";

ceos = new ArrayList<String>();
StringTokenizer token = new StringTokenizer(data, ",");

while(token.hasMoreTokens()) {
ceos.add(token.nextToken().trim());
}

String strTags = "Apple, Microsoft, Oracle, Google, Facebook, Twitter";
companies = new ArrayList<String>();
StringTokenizer token2 = new StringTokenizer(strTags, ",");

while(token2.hasMoreTokens()) {
companies.add(token2.nextToken().trim());
}

}

public List<String> getCeosList(String query) {

String country = null;
query = query.toLowerCase();
List<String> matched = new ArrayList<String>();
for(int i=0; i < ceos.size(); i++) {
country = ceos.get(i).toLowerCase();
if(country.startsWith(query)) {
matched.add(ceos.get(i));
}
}
return matched;
}

public List<String> getCoList(String query) {
String country = null;
query = query.toLowerCase();
List<String> matched = new ArrayList<String>();
for(int i=0; i < companies.size(); i++) {
country = companies.get(i).toLowerCase();
if(country.startsWith(query)) {
matched.add(companies.get(i));
}
}
return matched;
}
}
[/code]

2. Views using JQuery

company.jsp
Here is the important part where we are using the jQuery to hit the server. Note that the data is binded to the text box using the .autocomplete event.

[code lang=”xml”]
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Spring MVC Auto Complete with JQuery</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

</head>
<body>

<h2>Spring MVC Autocomplete with JQuery</h2>
<form:form method="post" action="submit" modelAttribute="companyForm">
<table>
<tr>
<th>CEOs</th>
<td><form:input path="ceos" id="ceos" /></td>
</tr>
<tr>
<th>Companies</th>
<td><form:input path="companies" id="companies" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Save" /> <input
type="reset" value="Reset" /></td>
</tr>
</table>
<br />

</form:form>

$(document).ready(function() {

$( "#ceos" ).autocomplete({
source: ‘${pageContext.request.contextPath}/get_ceos_list’
});

$( "#companies").autocomplete({
source: function (request, response) {
$.getJSON("${pageContext.request.contextPath}/get_co_list", {
term: extractLast(request.term)
}, response);
},
search: function () {
var term = extractLast(this.value);
if (term.length < 1) {
return false;
}
},
focus: function () {
return false;
},
select: function (event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});

});
</script>

</body>
</html>
[/code]

3. Spring MVC Configurations

dispatcher-servlet.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="javabeat.net.spring.mvc" />
<mvc:annotation-driven />
<bean id="jspViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>

</beans>
[/code]

4. Deployment Configurations

web.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>SpringExamples</display-name>
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>
org.springframework.web.servlet.DispatcherServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
[/code]

5. Run Spring MVC + jQuery Application

You can access the above application after deploying to your web server. You would see the screen like below. When you type the letters in the text box, you would get the suggestions drop down.

Download Source Code

[wpdm_file id=115]