一、Query.form.js 介紹

Query.form.js 是一個 form 外掛，可以實現表單提交併在當前頁面中處理返回值，即 html 中提交表單並實現不跳轉頁面處理返回值。

二、下載地址

http://malsup.github.io/jquery.form.js

三、ajaxForm() 和 ajaxSubmit() 的用法

1、引入 js 檔案

<script src="./static/js/jquery-3.3.1.min.js"></script>
<script src="./static/js/jquery.form.js"
 
></script>

2、ajaxForm() 使用

 $(function () {
        $('#myForm').ajaxForm({
            beforeSubmit: validate,
            success: function(data) {
               //返回資料處理
                alert(data);
            }
        });
    });

function validate() {
       ...
}

3、ajaxSubmit() 使用

 $(function () {
        $('#myForm').submit(function () {
            $('#myForm').ajaxSubmit({
                beforeSubmit: validate,
                success: function(data) {
                    //返回資料處理
                    alert(data);
                }
            });
            return false
 
;         //阻止表單預設提交
        });
    });


function validate() {
       ...
}

4、前端 html 程式碼

<form class="login-table" name="login" id="myForm" action="../controllers/login.php" method="post">
    <div class="login-left">
        <label class="username">使用者名稱</label>
        <input type="text" class="yhmiput" name="username" placeholder="Username" id="username">
    </div>
    <div class="login-right">
        <label class="passwd">密碼</label>
        <input type="password" class="yhmiput" name="password" placeholder="Password" id="password">
    </div>
    <div class="login-btn">
        <button type="submit">登入</button>
    </div>
</form>

5、引數介紹

ajaxForm() 和 ajaxSubmit() 的可選引數項物件：
ajaxForm 和 ajaxSubmit 都支援大量的可選引數，它們通過可選引數項物件傳入。可選引數項物件只是一個簡單的 JavaScript 物件，裡邊包含了一些屬性和一些值:

target

用server端返回的內容更換指定的頁面元素的內容。 這個值可以用 jQuery 選擇器來表示, 或者是一個 jQuery 物件， 一個 DOM 元素。
預設值： null

url

表單提交的地址。
預設值： 表單的 action 的值

type

表單提交的方式，’GET’ 或 ‘POST’.
預設值： 表單的 method 的值 (如果沒有指明則認為是 ‘GET’)

beforeSubmit

表單提交前執行的方法。
這個可以用在表單提交前的預處理，或表單校驗。如果 beforeSubmit 指定的函式返回 false，則表單不會被提交。
beforeSubmit 函式呼叫時需要3個引數：陣列形式的表單資料，jQuery 物件形式的表單物件，可選的用來傳遞給 ajaxForm/ajaxSubmit 的物件。
陣列形式的表單資料是下面這樣的格式：[ { name: ‘username’, value: ‘jresig’ }, { name: ‘password’, value: ‘secret’ } ]
預設值： null

success

當表單提交後執行的函式。 如果 success 回撥函式被指定，當 server 端返回對錶單提交的響應後，這個方法就會被執行。 responseText 和 responseXML 的值會被傳進這個引數 (這個要依賴於dataType的型別).
預設值： null

dataType

指定伺服器響應返回的資料型別。其中之一: null, ‘xml’, ‘script’, 或者 ‘json’. 這個 dataType 選項用來指示你如何去處理server端返回的資料。 這個和 jQuery.httpData 方法直接相對應。
‘xml’: 如果 dataType == ‘xml’，則 server 端返回的資料被當作是 XML 來處理， 這種情況下 success 指定的回撥函式會被傳進去 responseXML 資料
‘json’: 如果 dataType == ‘json’，則 server 端返回的資料將會被執行，並傳進 success 回撥函式
‘script’: 如果 dataType == ‘script’，則 server 端返回的資料將會在上下文的環境中被執行
預設值： null

semantic

一個布林值，用來指示表單裡提交的資料的順序是否需要嚴格按照語義的順序。一般表單的資料都是按語義順序序列化的，除非表單裡有一個type=”image”元素，所以只有當表單裡必須要求有嚴格順序並且表單裡有type=”image”時才需要指定這個。
預設值： false

resetForm

布林值，指示表單提交成功後是否需要重置。
預設值： null

clearForm

布林值，指示表單提交成功後是否需要清空。
預設值： null

iframe

布林值，用來指示表單是否需要提交到一個iframe裡。 這個用在表單裡有 file 域要上傳檔案時。
預設值： false

四、ajaxForm() 和 ajaxSubmit() 的區別

這兩種方法主要的卻別是 ajaxForm() 不能主動提交 form，函式只是為提交表單做準備需要以 submit 來觸發提交；而 ajaxSubmit() 會主動提交表單，同時可以在點選其他按鈕時也可以觸發提交，不一定是submit按鈕。

 $("form").ajaxForm();

等價於

$("form").submit(function(){
            $(this).ajaxSubmit();
            return false;        //ajaxSubmit 會自動提交表單，想要阻止自動提交，必須return false；
        })

1: html中提交表單並實現不跳轉頁面處理返回值
2: jQuery form外掛的使用–ajaxForm()和ajaxSubmit()的可選引數項物件
3: ajaxForm和ajaxSubmit的用法與區別