Quantcast
Channel: jquery – Crunchify
Viewing all articles
Browse latest Browse all 7

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

$
0
0

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.

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..

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…

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

Trending Articles