传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款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. 自测之Lesson7：设备文件操作

    题目:请编写一个输入密码(不回显)的程序,要求通过设置终端来完成. 完成代码: #include <stdio.h> #include <unistd.h> #include ...

  2. 什么是Processing

    Processing是一种计算机语言,以JAVA语法为基础,可转化成JAVA程序,不过在语法上简易许多.所有的原始代码及开发环境开放,主要用于艺术.影像.影音的设计与处理. 其次为什么要介绍这款软件呢 ...

  3. String 和 CharSequence 关系与区别

    String 继承于CharSequence,也就是说String也是CharSequence类型. CharSequence是一个接口,它只包括length(), charAt(int index) ...

  4. 后端设置cookie写不到前端页面

    javax.servlet.http.Cookie cookie = new javax.servlet.http.Cookie("id",session.getId()); co ...

  5. LintCode-66.二叉树的前序遍历

    二叉树的前序遍历 给出一棵二叉树,返回其节点值的前序遍历. 样例 给出一棵二叉树 {1,#,2,3}, 返回 [1,2,3]. 挑战 你能使用非递归实现么? 标签 递归 二叉树 二叉树遍历 非递归 c ...

  6. Node js路由

    /* 要为程序提供请求的 URL 和其他需要的 GET 及 POST 参数,随后程序需要根据这些数据来执行相应的代码. 因此,需要查看 HTTP 请求,从中提取出请求的 URL 以及 GET/POST ...

  7. 【hdu4734】F(x) 数位dp

    题目描述 对于一个非负整数 $x=​​\overline{a_na_{n-1}...a_2a_1}$ ,设 $F(x)=a_n·2^{n-1}+a_{n-1}·2^{n-2}+...+a_2·2^1+ ...

  8. python函数调用关系图（python call graph）

    由于要重构项目的部分代码,要整理好主要的函数调用关系,不想自己看代码慢慢画出结构,想找出一种通用的,节省人力的方法得出函数间的调用关系图,于是发现以下几个工具.(内网没装好graphviz,还没真正用 ...

  9. [BZOJ2821]作诗

    description 在线询问区间内出现次数为正偶数的数的种数. data range \[n,m\le 10^5\] solution 分块大法好 首先离散化权值 这种对于权值做询问并且询问放在一 ...

  10. [NOI2006]网络收费

    题面在这里 description 一棵\(2^n\)个叶节点的满二叉树,每个节点代表一个用户,有一个预先的收费方案\(A\)或\(B\); 对于任两个用户 \(i,j(1≤i<j≤2^n)i, ...