Here is the sample code implementing ajax call to send the data of a form to the controller and receiving json response from controller.
Student.java
Create a java bean class and generate setter and getter.
public class Student
{
private String name;
private String pass;
private String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
DemoController.java
Here, we are using @ResponseBody annotation to convert the student object into its equivalent json response object. This controller handles the ajax request and return the json response.
@Controller
public class DemoController
{
@RequestMapping(value="/accept" ,method= RequestMethod.POST)
public @ResponseBody Student Registration(HttpServletRequest req,HttpServletResponse res)
{
System.out.println("********inside accept");
String nm=req.getParameter("name");
String em=req.getParameter("email");
String ps=req.getParameter("pass");
Student student=new Student();
student.setSuccess("Successfully registered");
student.setName(nm);
student.setPass(ps);
student.setEmail(em);
return student;
}
Demo.js
Ajax implementation: here we are using serialize() method to serialize the form elements.
$(document).ready(function() {
$(document).on('submit', '#regForm', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'accept',
dataType:"json",
sync:true,
data: $(this).serialize(), //it will serialize the data of the form
success: function(response){
$('#final').html('MESSAGE:'+response.Success);
$('#name').val('');
$('#password').val('');
$('#email').val('');
},
error:function(e)
{
}
});
});
});
Register.jsp
This is the welcome page of the web application.
<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form id="regForm"method="post" >
<table align="center">
<tr><td>Registration Form</td></tr>
<tr><td>Name</td><td><input type="text" name="name"></td></tr>
<tr><td>Password</td><td><input type="text" name="pass"></td></tr>
<tr><td>Email</td><td><input type="text" name="email"></td></tr>
<tr><td><input type="submit" value="register" align="middle"></td></tr>
</table>
</form>
<div id=final></div>
</body>
</html>
0 Comment(s)