Spring,Ajax and jQuery Tutorial Hello World Application_how to send data from controller to ajax call-优快云博客

http://www.beingjavaguys.com/2013/07/sending-html-form-data-to-spring.html

In this particular blog we will discuss how to send html form data from Ajax to Spring Controller using jQuery. We will take a simple html form and will get the elements data into ajax function using jQuery $(#id).value() function. Then a call will be made to spring controller along with all form data as request parameters. Then the form data will be stored in java variables using @RequestMapping annotation. At the end a response will be send back to same ajax fucntion in json format.

Sending form data from AJAX to spring controller

We will select the form elements on the basis of their id's using jquery and their values will be stored in js variables. Then a request parameters data string will be made to send to spring controller. See the code below.

 
   view plain
   print
   ?
  
 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  pageEncoding="ISO-8859-1"%>  
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
 <title>Insert title here</title>  
 <script src="js/jquery-1.10.1.js" type="text/javascript"></script>  
   
 </head>  
 <body>  
  <center>  
     
    
    
  <b>Being Java Guys | Registration Form </b>   
   
     
   
   <script>  
    function doAjaxPost() {  
       
       
     var name = $('#name').val();  
     var gender = $('#gender').val();  
     var email = $('#email').val();  
     var phone = $('#phone').val();  
     var city = $('#city').val();  
   
     $.ajax({  
      type : "Get",   
      url : "hello.html",   
      data : "name=" + name + "&gender=" + gender + "&email="  
        + email + "&phone=" + phone + "&city=" + city,  
      success : function(response) {  
       alert(response);   
      },  
      error : function(e) {  
       alert('Error: ' + e);   
      }  
     });  
    }  
   </script>  
   <div id="form">  
    <form method="get">  
     <table>  
      <tr>  
       <td>Name :</td>  
       <td><input type="text" id="name" /></td>  
      </tr>  
      <tr>  
       <td>Gender :</td>  
       <td><input type="radio" id="gender" value="male" /> Male   
   
        <input type="radio" id="gender" value="female" /> Female</td>  
      </tr>  
      <tr>  
       <td>Email :</td>  
       <td><input type="text" id="email" /></td>  
      </tr>  
      <tr>  
       <td>Phone :</td>  
       <td><input type="text" id="phone" /></td>  
      </tr>  
      <tr>  
       <td>City :</td>  
       <td><select id="city"><option value="noida">Noida</option>  
         <option value="delhi">Delhi</option>  
         <option value="gurgaon">Gurgaon</option>  
         <option value="others">Others</option>  
       </select></td>  
      </tr>  
      <tr>  
       <td> </td>  
       <td><input type="button" value="Save" onclick="doAjaxPost();" />  
       </td>  
      </tr>  
     </table>  
    </form>  
   </div>  
  </center>  
 </body>  
 </html>  

Getting ajax data in spring controller and sending response back to ajax

Now we will use @RequestMapping annotation along with required value attributes to get the data send from ajax as request parameters and store that directly in java variables. At the end we have used @ResponseBody annotation to send back the response to ajax function in json format. See the code below:

 
   view plain
   print
   ?
  
 package com.beingjavaguys.controller;  
 /** 
  * @author Nagesh Chauhan 
  */  
 import org.springframework.stereotype.Controller;  
 import org.springframework.web.bind.annotation.RequestMapping;  
 import org.springframework.web.bind.annotation.RequestParam;  
 import org.springframework.web.bind.annotation.ResponseBody;  
   
 @Controller  
 public class Home {  
   
  @RequestMapping("/hello")  
  public @ResponseBody  
  String hello(@RequestParam(value = "name") String name,  
    @RequestParam(value = "gender") String gender,  
    @RequestParam(value = "email") String email,  
    @RequestParam(value = "phone") String phone,  
    @RequestParam(value = "city") String city) {  
   System.out.println(name);  
   System.out.println(gender);  
   System.out.println(email);  
   System.out.println(phone);  
   System.out.println(city);  
   
   String str = "{\"user\": { \"name\": \"" + name + "\",\"gender\": \""  
     + gender + "\",\"email\": \"" + email + "\",\"phone\": \""  
     + phone + "\",\"city\": \"" + city + "\"}}";  
   return str;  
   
  }  
 }  

If everything goes right ajax function will call the spring mvc controller along with data to sent, we will see sended data values printed on console and a response string from controller to ajax as alert.

Simple Html Form

Response back from controller

In this particular blog we came across how to use a ajax function to send data to spring controller and getting back the response in json format. In upcoming blogs we will see more about spring mvc and other opensource technologies.