通过submit提交的表单怎么实现ajax提交

通过ajax实现对submit表单的提交

  我们知道，ajax提交是不能使用submit的，如果用submit会直接跳过ajax提交。如果你一定要用submit来提交表单，并且又要使用ajax实现表单的提交，就将submit的返回值设置为false。
  submit提交表单，如果返回为true，表单直接提交；返回为false，表单就不提交(这时候就可以交给ajax来实现表单提交了)
  submit提交，又要使用ajax提交表单，需要在submit提交的时候返回false，将其拦截下来，使其不提交，然后交给ajax提交就行。

案例

表单通过submit方式提交

<form id="loginForm" action="" method="post" accept-charset="utf-8">
...
	<input type="submit" value="登录" id="loginBtn">
</form>

要实现ajax完成提交只需要将其返回值设置为false

	$("#loginForm").submit(function () {
    
    
		//写false，表示拦截
		return false;
	})

完整实现

        $("#loginBtn").click(function () {
    
    
            //要求两个值正确，我们才做提交
            if (checkUserName() && checkPassword()) {
    
    
                var un = $("#username").val()
                var pw = $("#password").val()
                //alert(un+pw)
                //写提交
                $.ajax({
    
    
                    url: "loginServlet",
                    async: true,
                    data: "username=" + un + "&password=" + pw,
                    type: "post",
                    dataType: "json",
                    success: function (data) {
    
    
                        alert(data)
                    },
                    error: function () {
    
    
                        alert("服务器发生了错误")
                    }
                });
            }
        })