jQuery Form插件详解

Jquery Form Plugin是jquery最重要的插件之一，它利用AJAX技术在不引起页面刷新的情况下POST表单。主要有两个方法：ajaxform和 ajaxsubmit。它会自动收集表单元素内容，决定如何管理提交进程。这两个方法支持多重选择。我想AJAX方式的表单应用再没有比这个插件更简单易用的了。

先在页面里设置一个普通的表单：
Html代码复制代码

1. <form id=”myForm” action=”comment.php” method=”post”>
   2.      姓名: <input type=”text” name=”name” id=”name”/>
   3.      评论: <textarea name=”comment” id=”comment”></textarea>
   4.      <input type=”submit” value=”提交评论” />
   5. </form>
   6. [/html]

<form id=”myForm” action=”comment.php” method=”post”>
    姓名: <input type=”text” name=”name” id=”name”/>
    评论: <textarea name=”comment” id=”comment”></textarea>
    <input type=”submit” value=”提交评论” />
</form>
[/html]

加载jquery库和插件脚本库。然后简单地写一段初始化脚本，这段脚本将在DOM加载完成时执行：
Html代码复制代码

1. <head>
   2.      <script type=”text/javascript” src=”jquery.js”></script>   //加载jquery
   3.      <script type=”text/javascript” src=”form.js”></script>     //加载插件
   4.      <script type=”text/javascript”>
   5.          // DOM加载完毕后执行
   6.          $(document).ready(function() {
   7.              // 绑定’myForm’并定义一个简单的回调函数
   8.              $('#myForm').ajaxForm(function() {
   9.                  alert(”评论提交完成!”);
10.              });
11.          });
12.      </script>
13. </head>
14. [/html]

<head>
    <script type=”text/javascript” src=”jquery.js”></script> //加载jquery
    <script type=”text/javascript” src=”form.js”></script>    //加载插件
    <script type=”text/javascript”>
        // DOM加载完毕后执行
        $(document).ready(function() {
            // 绑定’myForm’并定义一个简单的回调函数
            $('#myForm').ajaxForm(function() {
                alert(”评论提交完成!”);
            });
        });
    </script>
</head>
[/html]

OK，就是这么简单。当点击“提交评论”按钮后，表单的数据就会POST到comment.php脚本，并且返回“评论提交完成”信息（如果提交成功）。页面并没有刷新，非常AJAX……

让我们来看看这个插件还有什么强大的功能。

ajaxForm

1. 该方法须预先绑定表单，所以它一般在$(document).ready(function() { …}里定义。它能让表单在不刷新页面的情况下POST到目标。可以为该方法提供一个参数，参数一般是一个回调函数用于返回信息给用户。当然如果不提供参数也行，只是表单提在无声无息地提交后无法得到确认了。

2. 增加所有需要的事件监听器，为AJAX提交表单做好准备。ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为 AJAX提交表单进行准备。ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链接（Chainable）：可以。

实例：
Js代码复制代码

1. $('#myFormId').ajaxForm();

$('#myFormId').ajaxForm();

ajaxSubmit

1. 该方法是以响应事件来通用AJAX方式提交表单。比如点击某个按钮或改变了某个下拉框的值，在触发事件函数里可以设置该方法。如：
Js代码复制代码

1. $(”#clickme”).click(function(){
   2.    $(”#myForm”).ajaxSubmit();
   3. });

$(”#clickme”).click(function(){
$(”#myForm”).ajaxSubmit();
});

或者这样：
Html代码复制代码

1. <select id=”mySelect” onchange=”$(‘#myForm’).ajaxSubmit();”>

2. 马上由AJAX来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。
可链接（Chainable）：可以。

实例：
Js代码复制代码

1. // 绑定表单提交事件处理器
   2. $('#myFormId').submit(function() {
   3.     // 提交表单
   4.      $(this).ajaxSubmit();
   5.     // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
   6.     return false;
   7.     });

// 绑定表单提交事件处理器
$('#myFormId').submit(function() {
    // 提交表单
    $(this).ajaxSubmit();
    // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
    return false;
   });

formSerialize

1. 该方法可以表单域的名称和值连接起来，形成一个字符串，字符串格式为name1=value1&name2=value2…比如：
Js代码复制代码

1. var queryString=$(”#myForm”).formSerialize();

var queryString=$(”#myForm”).formSerialize();

变量queryString的值将为变成name=xxx&comment=xxx。得到这个字符串后，可以用$.post来提交，

如：
Js代码复制代码

1. $.post(”comment.php”,queryString);

$.post(”comment.php”,queryString);

2.将表单串行化（或序列化）成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。
可链接（Chainable）：不能，这个方法返回一个字符串。

实例：
Js代码复制代码

1. var queryString = $('#myFormId').formSerialize();
   2.
   3. // 现在可以使用$.get、$.post、$.ajax等来提交数据
   4. $.post('myscript.php', queryString);

var queryString = $('#myFormId').formSerialize();

// 现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('myscript.php', queryString);

fieldSerialize

1. 和formSerialize一样，返回一个字符串，但返回的是表单指定元素或特定元素类型域的字符串。返回字符串格式也是一样的。如：var queryString = $(’#myForm :text’).fieldSerialize();//返回myForm表单内所有文本框的字符串值。

2.将表单的字段元素串行化（或序列化）成一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。
可链接（Chainable）：不能，这个方法返回一个字符串。

实例：
Js代码复制代码

1. var queryString = $('#myFormId .specialFields').fieldSerialize();

var queryString = $('#myFormId .specialFields').fieldSerialize();

fieldValue

1.返回一个数组，记录表单元素的值。如果表单没有值则对应数组值为空。如：

Js代码复制代码

1. var data=$(’:text’).fieldValue();//返回所有表单中所有文本框类型的值。

var data=$(’:text’).fieldValue();//返回所有表单中所有文本框类型的值。

变量data为[”,”,”]这样的一个数组，数组元素对应表单元素的值。事实上我们可以这样来得到“姓名”文本框里的值：var data=$(”#name”).val();（这个元素要有ID属性）这样的作法不需要jquery form插件也可以得到值。但使用插件可以更方便地取得单个或多个表单中特定元素域的值。比如取得所有文本框或所有复选框的值。只要加个“:”就可以。这种方法也可以用到formSerialize或fieldSerialize方法上。
Js代码复制代码

1. var data=$(”#myForm :text”).fieldValue();//取得在myForm表单里所有文本框的值。

var data=$(”#myForm :text”).fieldValue();//取得在myForm表单里所有文本框的值。

2.返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。
可链接（Chainable）：不能，该方法返回数组。

实例：
Js代码复制代码

1. // 取得密码输入值
   2. var value = $('#myFormId :password').fieldValue();
   3. alert('The password is: ' + value[0]);

// 取得密码输入值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);

formToArray

同样也返回一个数组，这个数组是对象数组。对象有name和value两个属性，分别记录表单中的元素名称和元素值。如：
Js代码复制代码

1. var data=$(”#myForm”).formToArray();

var data=$(”#myForm”).formToArray();

变量data得到的是一个对象数组。data[0].name保存myForm表单中第一个表单元素的名称属性值，这里是”name”。data[0].value保存myForm表单中第一个表单元素的值，这里就是填了什么值就是什么。
resetForm

1.该方法很简单啦，恢复表单初始状态。也就恢复到DOM加载完成时的表单状态。类似“重设表单”

2.清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。
可链接（Chainable）：可以。
Js代码复制代码

1. $('#myFormId').clearForm();

$('#myFormId').clearForm();

clearFields

1.清除表单域元素。可以清除特定类型的域元素，比如清除所有文本框的，或所有复选框的域。

2.清除字段元素。只有部分表单元素需要清除时才方便使用。
可链接（Chainable）：可以。
Js代码复制代码

1. $('#myFormId .specialFields').clearFields();

$('#myFormId .specialFields').clearFields();

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。
默认值：null。

url

指定提交表单数据的URL。
默认值：表单的action属性值

type

指定提交表单数据的方法（method）：“GET”或“POST”。
默认值：表单的method属性值（如果没有找到默认为“GET”）。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果 “beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据， jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：

[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]

默认值：null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。
默认值：null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：

'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定，将传回responseXML值。

'json'：如果dataType == 'json'，服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。

'script'：如果dataType == 'script'，服务器响应将求值成纯文本。

默认值：null（服务器返回responseText值）

semantic

Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image".
布尔标志，表示数据是否必须严格按照语义顺序（slower？）来进行提交。注意：一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了 type="image"的input元素。如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将 semantic设置为true。（译注：这一段由于无法理解，翻译出来可能语不达意，但请达人指正。）
默认值：false

resetForm

布尔标志，表示如果表单提交成功是否进行重置。
Default value: null

clearForm

布尔标志，表示如果表单提交成功是否清除表单数据。
默认值：null

实例：
Js代码复制代码

1. // 准备好Options对象
   2. var options = {
   3.      target:     '#divToUpdate',
   4.      url:        'comment.php',
   5.      success: function() {
   6.        alert('Thanks for your comment!');
   7.      } };
   8.
   9.    // 将options传给ajaxForm
10. $('#myForm').ajaxForm(options);

// 准备好Options对象
var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success: function() {
      alert('Thanks for your comment!');
    } };

// 将options传给ajaxForm
$('#myForm').ajaxForm(options);

注意：Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options，你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。

jQuery Form插件详解的更多相关文章

JQuery自定义插件详解之Banner图滚动插件
前言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...
用jQuery开发插件详解
jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级 ...
jQuery lazyload插件详解和问题解答
lazyload插件用于图片延迟加载,节省服务器带宽,减少服务器请求次数,提高网站的页面加载速度,用于网站性能优化,只有当图片在窗口可视范围内时才向服务器请求: 参数: threshold:设置距离窗 ...
jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用自定义jq ...
使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
Uploadify 上传文件插件详解
Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...
jQuery 事件用法详解
jQuery 事件用法详解目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jque ...
jQuery extend方法详解
先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...
【转载】jQuery.extend 函数详解
转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

随机推荐

C# 动态创建SQL数据库（二）在.net core web项目中生成二维码后台Post/Get 请求接口方式 WebForm 页面ajax 请求后台页面方法实现输入框小数多自动进位展示，编辑时实际值不变快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
C#:小写金额转换为大写
#region 小写金额转换为大写 public static string CurrToChnNum(double Currnum) { string sResult = ""; ...
window 环境 Composer 安装 thinkphp5
参考链接:https://www.kancloud.cn/thinkphp/thinkphp5_quickstart/478269 在 Windows 中,你需要下载并运行 Composer-Setu ...
redis投票计数
<?php /** * * 缓存利用测试,这里我们获取传过来的投票数据,每次加1,如果增加到了设定值,才将投票 * 次数写回mysql,这大大减轻了与mysql链接的开销,redis的使用由此可 ...
微服务架构的进程间通信（IPC）
先抛出几个问题: 微服务架构的交互模式有哪些? 微服务常用的进程间通信技术有哪些? 如何处理部分请求失败? API的定义需要注意的事项有哪些微服务的通信机制与SOA的通信机制之间的关系与区别微服务 ...
linux的fork（）函数具体解释子进程复制父进程什么
#include<stdio.h> #include<string.h> #include<stdlib.h> #include<unistd.h ...
Java 小数类及四舍五入的方法精度非常高的小数时用
注意假设结果是无限位小数,不指定位数进行四舍五入的话会报错 import java.util.Scanner; import java.math.BigDecimal; public class Ma ...
DMA&PIO
DMA&PIO DMA的英文拼写是“Direct Memory Access”,汉语的意思就是直接内存访问,是一种不经过CPU而直接从内存存取数据的数据交换模式.在DMA模式下,CPU只须 ...
Xilinx IP核的根目录地址，有datasheet 和仿真相关的资料
C:\Xilinx\14.7\ISE_DS\ISE\coregen\ip\xilinx\dsp\com\xilinx\ip Xilinx IP核的根目录地址,有datasheet 和仿真相关的资料
C# JAVAMemory model
http://www.cl.cam.ac.uk/~pes20/weakmemory/index.html http://preshing.com/20120913/acquire-and-releas ...

jQuery Form插件详解

jQuery Form插件详解的更多相关文章

随机推荐

热门专题