ajax 提交Form表單並跳轉頁面

這是一個很簡單的例子：先看代碼

<form id="registeForm">
	<div class="form-w3step1">
		<input type="text" name="userName" placeholder="Your Name" required="">
		<input type="text" name="loginName" placeholder="Login Name" required="">
		<input type="password" name="userPassword" placeholder="Password" required="">
		<input type="password" name="confirm password" placeholder="Confirm Password" required="">
		<input type="text" name="userPhoneNo" placeholder="Mobile number" required="">
	</div>
	<div class="agileits-row2 w3ls-formrow2">
		<input type="checkbox" id="brand2" value="">
		<label for="brand2"><span></span>I accept the terms of Use</label> 
	</div>  
	<input id="registeFormSubmit" type="button" onclick="submitForm()" value="SUBMIT"/>
</form>

這裏使用input來做按鈕是爲了在按鈕上面顯示文字。記得將type改成button，不是submit哦。

在看下ajax：

<script>
	function submitForm() {
        $.ajax({
            type : 'POST',
            datatype : 'text',
            url : '/registe',
            data :  $("#registeForm").serializeArray(),
            success : function (data) {
                alert("success1:"+data);
                if ("success" == data){
                    alert("success2:"+data);
                    window.location.href="www.baidu.com";
                }
            },
            error: function(data) {
                alert("error:"+data.responseText);
            }
        });
    }
</script>

就是很簡單的ajax沒有上面特殊的地方。對了這裏返回的data 是你controller裏返回的字段哦。我是返回的success字符串所以

"success" == data能成功。

@PostMapping(value="/registe")
	@ResponseBody
	public String registe(){
		logger.info("registe-->");
		logger.info("userInfo--> ");
		return "this is return success";
	}

要加上@ResponseBody返回的纔是字符串，不然就是返回的頁面了。