在使用ajax提交表单的时候很多人会采用下面的方式:
<input type='text' name='name'>
<input type='text' name='age'>
<input type="button" onclick='submit_form()' value="提交">
...
<script>
submit_form() {
data = {
name: $("input[name='name']").val(),
age: $("input[name='age']").val(),
...
}
$.ajax({
url: 'submit.php',
type: 'post',
data: data,
dataType: 'json',
success: function(e) {
}
})
}
</script>
这种方法虽然也能够完成功能,但是很麻烦,很不优雅,这里介绍一种方法:
<form action='submit.php'>
<input type='text' name='name'>
<input type='text' name='age'>
<button type="submit">提交</button>
<form>
$('form').submit(function(e) {
//preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。
e.preventDefault();
//防止伪变量this变化,提前将其赋值给self
var self = $(this);
$.post(
self.attr('action'),
//序列化表单值,创建 URL 编码文本字符串。
self.serialize(),
function (result) {
if (result.success) {
//弹窗1秒后跳转到index.php
sucess_warning(result.msg);
setTimeout(function () {
window.location.href = index.php;
}, 1000);
} else {
fail_warning(result.msg);
return false;
}
},
'json'
).complete(function(result) {
var sqlError = result.responseText.indexOf('SQL');
if (result.status == 200 && sqlError != -1) {
fail_prompt('SQL错误:' + result.responseText, 3000);
return false;
}
});
});
这样可以禁用表单原来的方式提交,然后自动序列化表单值。