Quantcast
Viewing all articles
Browse latest Browse all 7

How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example

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.
Crunchify Spring MVC tutorial with Ajax and JSP

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.
Checkout Ajax and JSP result on browser

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.
Spring MVC - AJAX and JSP console output

And you are all set.. Cheers.. And as usual let me know for any query..

Have a suggestion or anything to add to this article? Chime in and share as a comment OR post it in forum.

The post How to use AJAX, jQuery in Spring Web MVC (.jsp) – Example appeared first on Crunchify.
Author: App Shah

Viewing all articles
Browse latest Browse all 7