知問前端——Ajax表單插件

時間 2019-12-11

標籤前端 ajax 表單插件欄目 Ajax 简体版

原文原文鏈接

傳統的表單提交，須要屢次跳轉頁面，極大的消耗資源也缺少良好的用戶體驗。而這款form.js表單的Ajax提交插件將解決這個問題。javascript

1、核心方法php

官方網站：http://malsup.com/jquery/form/css

form.js插件有兩個核心方法：ajaxForm()和ajaxSubmit()，它們集合了從控制表單元素到決定如何管理提交進行的功能。html

若沒有結合其餘插件、js、jQuery裏的submit()方法時，就用ajaxForm()提交表單。前端

若用js、jQuery裏的submit()方法時，就採用submit()方法。java

index.html：jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知問前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="box"></div>
    <form id="reg" action="123.html">
        <p class="myerror"></p>
        <p>帳號：<input type="text" name="user" id="user" /></p>
        <p>密碼：<input type="text" name="pass" id="pass" /></p>
        <p><input type="submit" value="提交" /></p>
    </form>
</body>
</html>

style.css：ajax

.valid {
    background: url(img/reg_succ.png) no-repeat right;
}
.abc {
    border: 5px solid green;
}

jQuery代碼以下：json

$("#reg").ajaxForm(); //ajaxForm自動阻止了默認提交
$("#reg").submit(); //直接跳轉

若此時<form>表單修改成：瀏覽器

<form id="reg" method="post" action="add.php">
    <p class="myerror"></p>
    <p>帳號：<input type="text" name="user" id="user" /></p>
    <p>密碼：<input type="text" name="pass" id="pass" /></p>
    <p><input type="submit" value="提交" /></p>
</form>

add.php：

<?php
    echo 'add.php';
?>

1.ajaxForm提交方式：

//ajax()中success:function() {}就是這裏的function
$("#reg").ajaxForm(function() {
    alert("提交成功！");
});

如何證實ajaxForm()中的function就是ajax()中success:function() {}呢？只須將add.php修改成：

<?php
    sleep(3);
    echo 'add.php';
?>

使其睡眠3秒鐘，而後回覆給瀏覽器，成功返回，彈出「提交成功」對話框。

注意：使用ajaxForm()方法，會直接實現ajax提交。自動阻止了默認行爲，而它提交的默認頁面是form控件的action屬性的值，提交的方式是method屬性的值。

2.ajaxSubmit()提交方式

使用submit()提交時，因爲會直接跳轉，即submit()方法沒有阻止默認提交，因此須要自行阻止，代碼以下：

$('#reg').submit(function () {
    ....
    return false;
});

$("#reg").submit(function() {
    $(this).ajaxSubmit(); //達到的效果如同$("#reg").ajaxForm();    
    $(this).ajaxSubmit(function() {  //達到的效果也如同$("#reg").ajaxForm(function() { alert("提交成功！"); });
        alert("提交成功！");
    }); //執行的也是ajax()中success方法
    return false; //submit()方法沒有阻止默認提交，須要自行阻止
});

注意：ajaxForm()方法，是針對form直接提交的，因此阻止了默認行爲。而ajaxSubmit()方法，因爲是針對submit()方法的，因此須要手動阻止默認行爲。而使用了validate.js驗證插件，那麼ajaxSubmit()比較適合咱們。

2、option參數

option參數是一個以鍵值對傳遞的對象，能夠經過這個對象，設置各類Ajax提交的功能。

$("#reg").submit(function() {        
    $(this).ajaxSubmit({
        url:"test.php", //設置提交的url，可覆蓋action屬性
        target:"#box", //服務器返回的內容存放在#box裏
        type:"get", //GET,POST兩種提交方式
        dateType:null, //xml,json,script，默認爲null，但經測試null和"html"都可用
        //clearForm:true, //成功提交後，清空表單
        //resetForm:true, //成功提交後，重置表單
        data:{ 
            aaa:"bbb" //增長額外的數據提交
        },
        beforeSubmit: function(formData,jqForm,options) {
            //提交以前執行，通常用於數據驗證
            //alert(options.url); //test.php
            //alert(jqForm.html()); //返回<form id="reg"></form>裏面的html內容
            //alert(formData[0].name); //獲得傳遞表單元素的name，即user
            //alert(formData[0].value); //獲得傳遞表單元素的value，即輸入的值
            //若是數據驗證不合法，就返回false，不讓提交，返回true讓提交，默認返回true
            return true;
        },
        //成功後回調
        success:function(responseText,statusText) {
            //alert("提交成功！");
            alert(responseText + " " + statusText);  //爲什麼返回0 [object HTMLDivElement]?，應該返回test.php success
        },
        //錯誤時調用
        error:function(event,errorText,errorType) {
            //alert("錯誤！");
            alert(errorText + " " + errorType); //error Not Found
        }
    });
    return false; //submit()方法沒有阻止默認提交，須要自行阻止
});

3、工具方法

form.js除了提供兩個核心方法以外，還提供了一些經常使用的工具方法。這些方法主要是在提交前或後對數據或表單進行處理的。

1.表單序列化：

alert($('#reg').formSerialize());

2.序列化某一個字段：

alert($('#reg #user').fieldSerialize());

3.獲得某個字段的value值：

alert($('#reg #user').fieldValue());

4.重置表單：

$('#reg').resetForm();

5.清空某個字段：

$('#reg #user').clearFields();

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。