传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款form.js表单的Ajax提交插件将解决这个问题。

一、核心方法

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

form.js插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。

若没有结合其他插件、js、jQuery里的submit()方法时，就用ajaxForm()提交表单。

若用js、jQuery里的submit()方法时，就采用submit()方法。

index.html：

<!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：

.valid {

    background: url(img/reg_succ.png) no-repeat right;

}

.abc {

    border: 5px solid green;

}

jQuery代码如下：

$("#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()比较适合我们。

二、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()方法没有阻止默认提交，需要自行阻止

});

三、工具方法

form.js除了提供两个核心方法之外，还提供了一些常用的工具方法。这些方法主要是在提交前或后对数据或表单进行处理的。

1.表单序列化：

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

2.序列化某一个字段：

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

3.得到某个字段的value值：

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

4.重置表单：

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

5.清空某个字段：

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

知问前端——Ajax表单插件的更多相关文章

  1. 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  2. 第一百八十五节，jQuery，Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  3. 知问前端——Ajax提交表单

    本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.da ...

  4. 知问前端——Ajax登录

    本文,将使用Ajax登录. 一.服务器端代码 is_user.php: <?php require 'config.php'; $query = mysql_query("SELECT ...

  5. 知问前端--Ajax

    本节课主要是创建一个问题表,将提问数据通过 ajax 方式提交出去.然后对内容显示进行布局,实现内容部分隐藏和完整显示的功能. 一．Ajax 提问创建一个数据表:question,分别建立:id.ti ...

  6. 第一百八十七节，jQuery，知问前端--cookie 插件，注册成功后生成cookie，显示登录状态

    jQuery,知问前端--cookie 插件 学习要点: 1.使用 cookie 插件 2.注册直接登录 Cookie 是网站用来在客户端保存识别用户的一种小文件.一般来用库可以保存用户登 录信息.购 ...

  7. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  8. jquery.form.js表单插件的使用

    jquery.form.js官网:http://malsup.com/jquery/form API文档:http://malsup.com/jquery/form/#api 下载地址:http:// ...

  9. jQuery插件 -- Form表单插件jquery.form.js<转>

    jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmi ...

随机推荐

  1. Python中from module import *语法

    from module import *的语法在Python 3.X和Python 2.X中的使用稍有区别: 在Python 3.X中,from module import *无法在函数里面使用,而在 ...

  2. PAT L1-048 矩阵A乘以B

    https://pintia.cn/problem-sets/994805046380707840/problems/994805082313310208 给定两个矩阵A和B,要求你计算它们的乘积矩阵 ...

  3. xpath教程一---简单的标签搜索

    工具 Python3版本 lxml库[优点是解析快] HTML代码块[从网络中获取或者自己杜撰一个] requests[推荐安装,从网页上获取网页代码练手,再好不过了] 讲解 网页代码都是成对的标签, ...

  4. 使用gdb查看栈帧的情况, 没有ebp

    0x7fffffffdb58: 0x004005ba  0x00000000  0x00000000  0x00000000 <-----funcb的栈帧 [0x7fffffffdb60, 0x ...

  5. delphi鼠标状态

    Screen.Cursor := crNo;

  6. BZOJ 口胡记录

    最近实在是懒的不想打代码...好像口胡也算一种训练,那就口胡把. BZOJ 2243 染色(树链剖分) 首先树链剖分,然后记录下每个区间的左右端点颜色和当前区间的颜色段.再对每个节点维护一个tag标记 ...

  7. NOIP2002 提高组

    [NOIP2002] 提高组 T1.均分纸牌 算法:贪心(模拟) [分析]: 1.简化 2.过滤 3.辩证法  详见课件的例7 还有一种类似的思路是:求出平均值后,i←1 to n-1扫描,若a[i] ...

  8. 锁-lock，信号量4

    1. 全局解释器锁,保证同一时间只有一个线程在执行,但是由于它是把数据copy成了两份,所以 只有全局解释器锁的时候,数据加减照样出错了. 2.用户态的锁,保证同一时间,只有一个线程在真真正正地修改数 ...

  9. NetScaler Best Practice With VMAC In A High Availability Configuration

    NetScaler Best Practice With VMAC In A High Availability Configuration https://www.citrix.com/blogs/ ...

  10. hadoop 使用map将SequenFile里的小文件解压出来

    上例中将HDFS里小文件通过mapper压缩到一个文件中,本例将这些小文件解压出来. mapreduce可以按SequenceFile的key进行分片. 1.mapper public class M ...