传统的表单提交，需要多次跳转页面，极大的消耗资源也缺乏良好的用户体验。而这款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. Memory及其controller芯片整体测试方案（上篇）

    如果你最近想买手机,没准儿你一看价格会被吓到手机什么时候偷偷涨价啦! 其实对于手机涨价,手机制造商也是有苦难言,其中一个显著的原因是存储器芯片价格的上涨↗↗↗ >>> 存储器memo ...

  2. 定点数(fixed-point number)

    定义 定点数(fixed-point number)就是小数点位置固定的数,也就是说,小数点后面的位数是固定的,比如要记录一笔账目,这些账目的数字都不会超过100,就可以使用2位小数位定点数来记录,比 ...

  3. Beta版本软件使用说明

    北京航空航天大学计算机学院 远航1617 小组 产品版本: Beta版本 产品名称:Crawling   is going on 文档作者:杨帆 文档日期:2013/12/24 1.   引言 1.1 ...

  4. Android中使用ViewPager制作广告栏效果 - 解决ViewPager占满全屏页面适配问题

    . 参考界面 : 携程app首页的广告栏, 使用ViewPager实现        自制页面效果图 : 源码下载地址: http://download.csdn.net/detail/han1202 ...

  5. Calculation PartⅡ

    GitHub/object-oriented 误删内容--周末修复

  6. 关于CString总结

    前言:串操作是编程中最常用也最基本的操作之一. 做为VC程序员,无论是菜鸟或高手都曾用过CString.而且好像实际编程中很难离得开它(虽然它不是标准C++中的库).因为MFC中提供的这个类对 我们操 ...

  7. Zigbee安全基础篇Part.3

    原文地址: https://www.4hou.com/wireless/14294.html 导语:在之前的文章中提供了ZigBee协议及其安全功能的简要概述.在本文中,我们将探讨可在ZigBee网络 ...

  8. Redis的概述和简单使用（转载）

    文章来源:http://jingyan.baidu.com/article/db55b60996d0124ba30a2f92.html Redis是一个基于key-value的高速缓存系统,类似于me ...

  9. MyBatis的架构设计以及实例分析

            MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个sel ...

  10. JavaScript 语句标识符，变量周期，常见的HTML事件

    语句 描述 break 用于跳出循环. catch 语句块,在 try 语句块执行出错时执行 catch 语句块. continue 跳过循环中的一个迭代. do ... while 执行一个语句块, ...