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.<%@ 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: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.
No comments:
Post a Comment