Recently I’ve to use jQuery, AJAX in Spring MVC Java example. In .jsp (View) I wanted to update specific field every 3 second. Let me share this simple example.
This example will help you if you have any one of below queries:
- Spring Framework + jQuery AJAX Request Example
- Spring MVC 3 and jQuery Integration Tutorial
- How to get a new value from a Spring Controller using Ajax every n second?
- Spring 3 MVC, Ajax and jQuery Magic Tutorials
- How to use Ajax with Spring MVC 3 using Annotations and JQuery?
We will do a simple web application which will show Random Number with Current Time every 3 seconds.
Let’s start.
Step1: Pre-Requisite: http://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Deploy this project successfully on Tomcat)
Step2: Let’s create 2 new files. ajax.jsp and CrunchifySpringAjaxJQuery.java
package com.crunchify.controller;
import java.util.Date;
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.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Random;
/**
* @author Crunchify.com
*
*/
@Controller
public class CrunchifySpringAjaxJQuery {
@RequestMapping("/ajax")
public ModelAndView helloAjaxTest() {
return new ModelAndView("ajax", "message", "Crunchify Spring MVC with Ajax and JQuery Demo..");
}
@RequestMapping(value = "/ajaxtest", method = RequestMethod.GET)
public @ResponseBody
String getTime() {
Random rand = new Random();
float r = rand.nextFloat() * 100;
String result = "<br>Next Random # is <b>" + r + "</b>. Generated on <b>" + new Date().toString() + "</b>";
System.out.println("Debug Message from CrunchifySpringAjaxJQuery Controller.." + new Date().toString());
return result;
}
}<html>
<head>
<TITLE>Crunchify - Spring MVC Example with AJAX call</TITLE>
<style type="text/css">
body {
background-image:
url('http://crunchify.com/wp-content/uploads/2013/03/Crunchify.bg_.300.png');
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function crunchifyAjax() {
$.ajax({
url : 'ajaxtest.html',
success : function(data) {
$('#result').html(data);
}
});
}
</script>
<script type="text/javascript">
var intervalId = 0;
intervalId = setInterval(crunchifyAjax, 3000);
</script>
</head>
<body>
<div align="center">
<br> <br> ${message} <br> <br>
<div id="result"></div>
<br>
<p>
by <a href="http://crunchify.com">Crunchify.com</a>
</p>
</div>
</body>
</html>
Step 3: Open Web Browser and visit this URL: http://localhost:8080/CrunchifySpringMVC3.2.1/ajax.html
Another must read: http://crunchify.com/how-to-write-json-object-to-file-in-java/
Step 4: Watch your Result..
Step 5: Let’s do some debugging. You should be able to see below debugging statements in Eclipse Console to verify that your AJAX call is working and hitting Controller…
And you are all set.. Cheers.. And as usual let me know for any query..
The post How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example appeared first on Crunchify.