这是一个很简单的例子:先看代码
<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返回的才是字符串,不然就是返回的页面了。