Visualizzazione post con etichetta Ajax. Mostra tutti i post
Visualizzazione post con etichetta Ajax. Mostra tutti i post

mercoledì 16 luglio 2014

Ajax call for Java Spring




I found a great tutorial on how to invoke an ajax call on java spring.
Source: http://crunchify.com/how-to-use-ajax-jquery-in-spring-web-mvc-jsp-example/

It follows the code (of the website reported).
This code is going to invoke an ajax call every x seconds.

Code for the controller:
 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;  
   }  
 }  



and here the code for the View:
 <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>  





I had to use a slight variation.
I wanted to have the ajax call only on click of a button.
The controller remains the same. What needs to be changed is the view:
 <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);  
       }  
     });  
   }  
      $( "#button_refresh" ).click(function() {  
           crunchifyAjax();  
      });  
 </script>  
 </head>  
 <body>  
   <div align="center">  
     <br> <br> ${message} <br> <br>  
     <button id="button_refresh">Refresh</button>  
     <div id="result"></div>  
     <br>  
     <p>  
       by <a href="http://crunchify.com">Crunchify.com</a>  
     </p>  
   </div>  
 </body>  
 </html>