使用ajax优雅快捷地提交表单

在使用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;
        }
    });
});

这样可以禁用表单原来的方式提交，然后自动序列化表单值。