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 get started.
Step-1
Pre-Requisite: http://crunchify.com/hello-world-example-spring-mvc-3-2-1/ (Deploy this project successfully on Tomcat)
Step-2
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://cdn3.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
Make sure you have below package structure.
Image may be NSFW.
Clik here to view.
Step-4
Open Web Browser and visit this URL: http://localhost:8080/CrunchifySpringMVCTutorial/ajax.html
Another must read: http://crunchify.com/how-to-write-json-object-to-file-in-java/
Step-5
Checkout your Result..
Image may be NSFW.
Clik here to view.
Step-6
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…
Image may be NSFW.
Clik here to view.
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.
Author: App Shah