Spring Ajax 前后端传值（对象）

环境：Spring boot，idea，maven，jdk8，tomcat8.0
话不多说，show code，一点解释在最后

1. 前端代码（就一个表单）

<form class="form-horizontal" id="login-form" method="post">
            <div class="form-group">
                <label for="inputName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="inputName" placeholder="userName"/>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password"/>
                </div>
            </div>
            <div class="form-group ">
                <label class="col-sm-2  control-label">身份</label>
                <div class="col-sm-10">
                    <select class="form-control" id="userType">
                        <option name="code" value="2">普通用户</option>
                        <option name="code" value="1">医生</option>
                        <option name="code" value="0">管理员</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"/> Remember me
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button id="login" type="button" class="btn btn-default">登录</button>
                    <button id="register" type="button" class="btn btn-default">注册</button>
                </div>
            </div>
        </form>

1. 后台接口

@RequestMapping(value = "/login",method = RequestMethod.POST)
    public AjaxResponse userLogin(@RequestBody Login login){
        System.out.println("运行了接口");
        if (login.code == 0){
            System.out.println(login.name);
            UserSuper userSuper = userSuperApplication.findUserSuperName(login.name);
            if (StringUtils.isEmpty(userSuper)){
                return AjaxResponse.failure("请输入正确的用户名！");
            }else {
                if (userSuper.getPassWord().equals(login.pw)){
                    return AjaxResponse.succss(userSuper);
                }else {
                    return AjaxResponse.failure("请输入正确的密码");
                }
            }
        }
        后面省略了就
        这个AjaxReponse就是一个类，含有msg，和object类型的的data，用来返回数据
        这个是Login类
        @Data
    static class Login{
        private String name;
        private String pw;
        private Integer code;
        public Login(){}
    }

1. 列表内容
2. ajax交互

这个东西真的很蛋疼，第一次学做，login前面忘了写#，搞了好几个小时

$(function () {
    $("#login").click(function () {
    这里两个json对象定义都可以的，一样的
        var login = {
            name:$("#inputName").val(),
            pw:$("#inputPassword3").val(),
            code:$("#userType").val()
        };
        /*var login = {}
        login["name"] = $("#inputName").val();
        login["pw"] = $("#inputPassword3").val();
        login["code"] = $("#userType").val();*/
        $.ajax({
            type: 'post',
            url: '/bibased/login',
            data: JSON.stringify(login),
            dataType:'json',
            contentType:"application/json;charset=utf-8",
            success:function (result) {
                if (result.code == 1){
                    alert(result.msg);
                }else {
                    alert(result.msg);
                }
            }
        })
    })
});

1. 要求前端封装的json数据中字段和后端接口中的类的属性名称一致，不一致就匹配不了了
2. 说一下ajax代码吧

$.ajax({
            type: 'post', 传递方式
            url: '/bibased/login',后台接口
            data: JSON.stringify(login),//要发送的数据，login就是封装好
            的json，后台@RequestBody接受的是一个json格式的字符串，关于json
            字符串和json对象的区分可以参考这个文章：
            https://www.cnblogs.com/ilinuxer/p/6869933.html

            dataType:'json',
            contentType:"application/json;charset=utf-8",
            success:function (result) {
                if (result.code == 1){
                    alert(result.msg);
                }else {
                    alert(result.msg);
                }
            }
        })

3.其他的传值方式用到了再来补，欢迎各位大佬指正，留言或者评论