使用Ajax传递和接收数据,实现注册和注册成功后跳转

返回状态信息实体类省略get和set

    private String stauts;
    private String msg;

控制器

    @RequestMapping(value = "register", method = RequestMethod.POST,
    consumes = "application/json",produces = "application/json")
    @ResponseBody
    public ResponseResult register(@RequestBody RegisterInfo registerInfo) {

        System.out.println(registerInfo.getName());
        ResponseResult result = null;
        if (service.register(registerInfo)){
            result = new  ResponseResult("sucess","注册成功");
        }else {
            result = new  ResponseResult("error","注册失败");
        };
        return result;
    }

js代码中$.fn.serializeObject序列化对象,location.href实现跳转,

<script>
    function register() {
        var jsonInfo = $('#myform').serializeObject();
        var jsonString = JSON.stringify(jsonInfo);
        console.log(jsonString);
        $.ajax({
            type:'POST',
            data:jsonString,
            url:"/register?t="+new Date().getTime(),
            contentType:"application/json",
            success:function (data,type) {
                alert(data.msg);
                location.href="/"
            },
            error:function () {
                alert(data.msg);
            }
        })
    }
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if(o[this.name]) {
                if(!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
</script>

表单

    <form id="myform" name="myform">
        姓名:<input id="name" type="text" name="name" /><br/>

        密码:<input id="password" type="password" name="password" /><br/>

        电话号码:<input type="number" id="phone" name="phone"><br/>

        性别:<input type="radio" id="man" name="gender" value="男">男
              <input type="radio" id="women" name="gender" value="女">女<br/>

        注册类型:<select id="object" name="object">
        <option value="0" selected="selected">请选择身份</option>
        <option value="admin">管理员</option>
        <option value="teacher">教师</option>
        <option value="parent">家长</option>
        <option value="student">学生</option>
    </select>
        <br/>
        <input type="button" value="注册" onclick="register();"/>
    </form>

猜你喜欢

转载自blog.csdn.net/Milan__Kundera/article/details/82722238