创建多个json对象并通过ajax传入spring控制器

时间:2018-04-05 03:45:14

标签: html ajax spring-mvc spring-boot spring-config

<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>
                &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                <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 =拉杰什+ XYZ&安培; employeeSurName = XYZ&安培;生日=安培;流动= 213333123&安培;用户名= rajesh_xyz%40gmail.com&安培;密码= SSSS&安培; re_password = WWW&安培; house_no = WWW&安培; STREET_NAME =扁平+未%3AA-27&安培;状态=马哈拉施特拉&安培;城市= Latur的&安培;拉链= 411019

我已经有三个pojo对象员工,用户,地址。我怎样才能将这三个对象从ajax传递给cotroller

1 个答案:

答案 0 :(得分:0)

您应该为此创建某种请求包装器或命令对象。

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
}