<script>
$(document).ready(function() {
$("#frm_details").on("submit", function(event) {
event.preventDefault();
var data = $(this).serialize()
$.ajax({
url : "/saveUser",
type : "post",
contentType : "application/json",
data: JSON.stringify({ user: user, employee: employee, address: address }),
dataType : 'json',
success : function(d) {
location.replace("index.html");
}
});
});
});
这是 HTML 注册表
<html lang="en"> <head> <title>Registration Form</title> </head>
<body> <div class="container"> <h1 class="well">Registration
Form</h1> <div class="col-lg-12 well"> <div class="row">
<form name="frm_details" id="frm_details" method="post">
<div class="row">
<div class="col-sm-6 form-group">
<label>First Name*</label> <input type="text" name="employeeName"
id="employeeName" placeholder="Enter First Name Here.."
class="form-control" required>
</div>
<div class="col-sm-6 form-group">
<label>Last Name*</label> <input type="text"
name="employeeSurName" id="employeeSurName"
placeholder="Enter Last Name Here.." class="form-control"
required>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label>Birth Date*</label>
<div class="input-append date">
<input type="text" class="form-control datepicker"
name="birthDay" id="birthDay"
placeholder="Enter Birth Date Here.." required>
</div>
</div>
<div class="col-sm-6 form-group">
<label>Mobile Number*</label> <input type="text"
placeholder="Enter Mobile Number Name .." class="form-control"
name="mobile" id="mobile" required>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label>Email Address*</label> <input type="email"
placeholder="Enter Email Address Here.." class="form-control"
name="userName" id="userName"
data-error="Please enter valid email address" required>
</div>
<div class="col-sm-4 form-group">
<label>Password*</label> <input type="password" id="password"
placeholder="Password" class="form-control" name="password"
data-minlength="6" required>
<div class="help-block">Minimum of 6 characters</div>
</div>
<div class="col-sm-4 form-group">
<label>Re-Password*</label> <input type="password"
data-match="#password" id="re_password" name="re_password"
data-match-error="Whoops,these don't match"
placeholder="Confirm" required class="form-control" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label>House No*</label> <input type="text"
placeholder="Enter House Number Here.." class="form-control"
name="house_no" id="house_no">
</div>
<div class="col-sm-4 form-group">
<label>STREET NO</label> <input type="text"
placeholder="Street Number" class="form-control"
data-error="Street Number required" name="street_Name"
id="street_Name" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-sm-4 form-group">
<label>State*</label> <select id="state" class="form-control"
data-error="State required" name="state" id="state" required>
<option value="" selected="selected">-- Select State--</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-4 form-group">
<label>City*</label> <select class="form-control" id="city"
name="city" data-error="City required" required>
<option value="" selected="selected">-- Select City--</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-4 form-group">
<label> Pin Code*</label> <input type="text" id="zip" name="zip"
placeholder="Enter Pin Code Number Here.."
data-error="Zip required" class="form-control" required>
</div>
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-lg btn-info">Submit</button>
<button type="reset" class="btn btn-lg btn-info">RESET</button>
</form> </div> </div> </div> <script type="text/javascript"> $('input.datepicker').each(function() {
var datepicker = $(this);
datepicker.bootstrapDatePicker(datepicker.data()); }); </script>
此控制器类
@RequestMapping("/saveUser")
public String saveUser(@RequestBody String json) {
try {
if (!StringUtils.isEmpty(json))
return "1";
else
return "0";
} catch (Exception ex) {
return "1";
}
}
我在 json 中得到这种类型的结果：
employeeName=Rajesh+XYZ&employeeSurName=xyz&birthDay=&mobile=213333123&userName=rajesh_xyz%40gmail.com&password=ssss&re_password=www&house_no=www&street_Name=Flat+No%3AA-27&state=Maharashtra&city=Latur&zip=411019
我已经有三个pojo对象员工，用户，地址。我怎样才能将这三个对象从 ajax 传递到 cotroller
您可能应该为此创建某种请求包装器或命令对象。
public class RegistrationCommand {
private String employeeName;
private String password;
private String address;
//etc...
}
然后，您可以像这样绑定该请求：
@RequestMapping("/saveUser")
public String saveUser(@RequestBody RegistrationCommand request) {
}
如果你想保留现有的json结构，那么我可能会做这样的事情：
public class RegistrationCommand {
private User user;
private Employee employee;
private Address address;
//etc...
private static class User {
private String name;
private String password;
//etc...
}
// Employee & Address classes
}