同步提交
<form id="register_form" method="post" action="/register">
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email" autofocus>
</div>
<div class="form-group">
<label for="nickname">昵称</label>
<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Nickname">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<button type="submit" class="btn btn-success btn-block">注册</button>
</form>
表单具有默认的提交行为,默认是同步的,同步表单提交,浏览器会锁死(转圈儿)等待服务端的响应结果。
表单的同步提交之后,无论服务端响应的是什么,都会直接把响应的结果覆盖掉当前页面。(服务器重定向只针对同步提交有效)
异步提交(ajax)
$('#register_form').on('submit', function (e) {
e.preventDefault()
let formData = $(this).serialize()
//console.log(formData)
$.ajax({
url: '/register',
type: 'post',
data: formData,
dataType: 'json',
success: function (data) {
const err_code = data.err_code
console.log(err_code)
if (err_code === 0) {
//window.alert('注册成功!')
// 服务端重定向针对异步请求无效
window.location.href = '/'
} else if (err_code === 1) {
window.alert('邮箱或昵称已存在!')
}
else if (err_code === 500) {
window.alert('服务器忙,请稍后重试!')
}
}
})
})
在进行表单异步提交时,服务器重定向是无效的。这时,需要在客户端进行路由跳转。