表单同步提交和异步提交
同步提交
表单具有默认的提交行为,默认是同步的,同步表单提交,浏览器会锁死等待服务端的响应结果
表单的同步提交之后,无论服务端响应的是什么,都会直接把响应的结果覆盖掉当前页面。
可以用重定向解决这个问题。
<form id="register_form" method="post" action="/register">
要保留用户输入过的表单信息,可以在服务端重定向时提取请求体渲染回去
异步提交
服务端重定向只针对同步请求才有效,异步请求无效
需要客户端重定向如:window.location.href='/'
$('#register_form').on('submit', function (e) {
e.preventDefault()
var formData = $(this).serialize()
$.ajax({
url: '/register',
type: 'post',
data: formData,
dataType: 'json',
success: function (data) {
var err_code = data.err_code
if (err_code === 0) {
// window.alert('注册成功!')
// 服务端重定向针对异步请求无效
window.location.href = '/'
} else if (err_code === 1) {
window.alert('邮箱已存在!')
} else if (err_code === 2) {
window.alert('昵称已存在!')
} else if (err_code === 500) {
window.alert('服务器忙,请稍后重试!')
}
}
})
})
由于不跳转,所以自动保留用户输入过的表单信息