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

偏执的太偏执、 2022-12-11 09:21 201阅读 0赞

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

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

### 案例 ###

#### 表单通过submit方式提交 ####

#### 要实现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("服务器发生了错误")
                        }
                    });
                }
            })