1. 程式人生 > >使用Ajax傳遞和接收資料,實現註冊和註冊成功後跳轉

使用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/>
    </form>
    <input type="button" value="註冊" onclick="register();"/>