译自:http://www.malsup.com/jquery/form/
简介
jQuery Form Plugin可以简便且隐式地使用AJAX改善HTML表单(Form)。主要的函数ajaxForm和ajaxSubmit从表单元素中收集信息然后决定如何管理提交过程。这两个函数都支持很多的选项,它们可以使你完全控制数据的提交方式。用AJAX提交表单再没有jQuery Form Plugin更方便的了。
开发这个插件经过了一个团队的努力,许多人为它贡献各种点子和代码:
John Resig、Mike Alsup、Mark Constable、Klaus Hartl、Matt Grimm、Yehuda Katz、Jörn Zaefferer、Sam Collett、Gilles van den Hoven、Kevin Glowacz、Alex Andrienko
快速入门
在页面中加入表单。无需加入特殊的标记,仅仅是一个正常的表单:
<form id="myForm" action="comment.php" method="post">
Name: <input type="text" name="name" />
Comment: <textarea name="comment"></textarea>
<input type="submit" value="Submit Comment" />
</form>
包含jQuery和jQuery Form Plugin的脚本文件,然后在DOM加载后使用简短的脚本来初始化表单:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
// 等待DOM加载
$(document).ready(function() {
// 绑定"#myForm",然后加入回调函数
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
</head>
...
当表单被提交时,name和comment字段会被post到comment.php。如果服务器返回成功状态,用户将收到”Thank you for your comment!”的消息。
下载
可以点击这里下载 或者访问这里http://github.com/malsup/form 。
jQuery Google Group(http://groups.google.com/group/jquery-en/topics )提供了对jQuery Form Plugin的支持,这是个很活跃的论坛,许多的jQuery开发者和用户都订阅了它。
jQuery Form Plugin的API
jQuery Form Plugin的API提供了多种方法来控制表单的数据以及表单的提交。
ajaxForm ———— 为将要提交的表单绑定必要的事件处理函数。这个函数不提交表单。一般是当DOM加载后即调用ajaxForm来准备AJAX提交。ajaxForm的参数可选。唯一的参数可以是一个回调函数或者是一个选项对象(Options)。可以链式调用,即返回调用对象本身。可以为ajaxForm传递标准的$.ajax() 的选项。
示例:
$('#myFormId').ajaxForm();
ajaxSubmit ———— 立即通过AJAX提交表单。最常见的是当用户点击提交按钮时调用。ajaxSubmit的参数同ajaxForm。同样可以链式调用。其参数同样可为$.ajax()的选项。
示例:
// 为表单的提交事件绑定事件处理函数
$('#myFormId').submit(function() {
// 提交表单
$(this).ajaxSubmit();
// 返回false以防止浏览器的默认操作,即刷新页面的提交方式
return false;
});
formSerialize ———— 将表单数据序列化成查询字符串。这个函数将返回以下格式:name1=value1&name2=value2。不可链式调用,这个函数返回字符串。
示例:
var queryString = $('#myFormId').formSerialize();
// 这个数据现在可以通过$.get, $.post, $.ajax等来提交
$.post('myscript.php', queryString);
fieldSerialize ———— 将字段数据序列化成查询字符串。当只需要序列化表单的一部分时,这个函数很方便。这个函数返回以下格式的字符串: name1=value1&name2=value2。不可链式调用。
示例:
var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue ———— 返回一个数组,包含指定元素的值。在.91版中,这个方法总是返回数组。如果没有有效的值可以确定,这个数组将是空的,反之它将包含一个或多个值。不可链式调用。
示例:
// 获取密码控件的值
var value = $('#myFormId :password').fieldValue();
alert('The password is: ' + value[0]);
resetForm ———— 通过调用原始的DOM方法来重置表单到原始状态。可链式调用。
示例:
$('#myFormId').resetForm();
clearForm ———— 清空表单元素。这个函数清空所有文本框,密码框,textarea元素,取消select元素和单选框多选框的选择。可以链式调用。
示例:
$('#myFormId').clearForm();
clearFields ———— 清空表单元素。当只需要清空表单的某个(些)元素时,这个方法很方便。可链式调用。
示例:
$('#myFormId .specialFields').clearFields();
ajaxForm 和 ajaxSubmit 的选项
除了以下列出的选项,你也可以给这两个函数传递标准$.ajax的选项。
target ———— 指定页面中的哪些元素用于响应服务器端的更新。这个值可以是jQuery查询字符串,或者它指定的jQuery对象,或者是DOM元素。默认值:null
replaceTarget ———— 配合target选项使用。当被设置为true时,target指定的部分将被替换,否则只替换它的内容。默认值:false
url ———— 指定数据要提交到的URL。默认值:表单的action属性值
type ———— 指定表单提交的方式:’GET’或者’POST’。默认值:表单的method属性值(若无则为’GET’)
data ———— 要同表单一起提交的额外数据,格式:data: { key1: ‘value1′, key2: ‘value2′ }
dataType ———— 服务器响应的数据类型,值可以为:null, ‘xml’, ‘script’, 或者’json’。这个选项指定服务器端的响应如何处理。它直接映射到了jQuery.httpData方法。如果dataType为’xml’,则服务器的响应将被看成是XML,’success’回调函数将被传入responseXML的值。如果dataType为’json’,则服务器的响应将被看成是JSON对象(通过eval),并传给’success’回调函数。如果dataType为’script’,则服务器的响应将被eval成全局上下文。默认值:null
beforeSerialize ———— 表单序列化前的回调函数。它提供了一个机会以在值被获取前控制表单。其中的一个参数是表单的jQuery对象,另一个是传给ajaxForm/ajaxSubmit的选项对象。默认值:null
beforeSerialize: function($form, options) {
// 返回false将取消提交操作
}
beforeSubmit ———— 表单提交前的回调函数。一般用于处理表单提交前的逻辑,如验证表单数据。如果这个回调函数返回false,提交操作将被取消。它的三个参数分别是表单数据组成的数组,表单的jQuery对象,传给ajaxForm/ajaxSubmit的选项对象。默认值:null
beforeSubmit: function(arr, $form, options) {
// 第一个参数的格式:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// 返回false将取消提交操作
}
success ———— 表单被成功提交后,服务器端产生响应时的回调函数。它将被传入以下参数:
1. responseText 或者 responseXML 的值(取决于dataType选项的值)
2. statusText
3. xhr(XMLHttpRequest对象)(若jQuery的版本小于1.4,则为jQuery封装过的表单元素)
4. jQuery封装过的表单元素(若jQuery的版本小于1.4,则为undefined)
默认值:null
semantic ————— 指定提交的数据是否遵循语义上的顺序(较正常方式慢)。注意一般情况下表单的序列化都遵循语义上的顺序,除非有image类型的控件。只有当服务器对提交的数据的语义上的顺序有严格要求而且表单含有image类型的控件时才设置为true。默认值:false
resetForm ———— 当成功提交时是否重置表单。默认值:null
clearForm ———— 当成功提交时是否清除表单。默认值:null
iframe ———— 是否总是将服务器的响应放在iframe里面。默认值:false
iframeSrc ———— 如果iframe选项为true,则要添加到iframe中的src属性。默认值:about:blank,使用https协议的页面的默认值为:javascript:false
forceSync ———— 指定是否在上传文件或者使用iframe选项提交表单时去除短时间的延迟。这个延迟用于浏览器在进行原始的提交操作前渲染DOM。通过它给用户提示如”请稍候”,这改善了可用性。默认值:false
选项示例:
// 准备选项对象
var options = {
target: '#divToUpdate',
url: 'comment.php',
success: function() {
alert('Thanks for your comment!');
}
};
// 把选项对象传递给ajaxForm函数
$('#myForm').ajaxForm(options);
示例
官方网站上提供了丰富的示例,参见:http://www.malsup.com/jquery/form/#ajaxForm
其他细节
jQuery Form Plugin兼容jQuery v1.3.2及其更新的版本。
它不依赖其它插件。
它既快又准,甚至比Prototype和dojo都好,以下是一个对比:http://www.malsup.com/jquery/form/comp/
它经过了大量的单元测试以验证其强大功能,点击这里进行测试:http://www.malsup.com/jquery/form/test/
它同样支持文件的上传。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/ydmdzq_helloworld/archive/2010/09/08/5871442.aspx
分享到:
相关推荐
jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...
jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多...
jQuery Form Plugin允许你轻松和不显眼地升级HTML表单以使用AJAX。 主要方法,ajaxForm和ajaxSubmit,从表单元素收集信息,以确定如何管理提交过程。 这两种方法都支持许多选项,使您可以完全控制数据的提交方式。
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程。 测试环境:部署到Tomcat中的web项目。 本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajax...
http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单。一个普通的表单,不需要任何特殊的标记: 代码如下:<form id=”myForm” method=”post” action=”/Home/...
(function(){ $('form#form').formMonitoring({ ajax: true, // boolean or $.ajax() option paramater ajaxLoading: function(elm){ // if ajax option then call ajax before call }, callback : function(elm){ ...
FormJS jQuery插件无需重新加载页面即可提交表单。 发送后发送可自定义的反馈安装 安装: npm install --save jagfx-formjs用法快速使用最少的代码<!DOCTYPE html >< html lang =" en " >< head ><...
This jQuery plugin is used for JHSS wap project.JHSS TOOL: 一些常用的工具类方法,包括网络请求的封装,数据的格式化等方法JHSS UI: 公用的数据解析为DOM的方法常用API###1.网络请求var httprequest = $....
这两种方法都支持众多选项,使您可以完全控制数据的提交方式。 不需要特殊的标记,只需一个正常的形式。 用AJAX提交表单没有比这更容易了!社区是否想为jQuery Form做出贡献? 太棒了! 有关更多信息,请参见。行为...
form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单; ...
保存任何HTML表单元素支持内容可编辑属性完全定制如果ajax请求失败,请重试功能将表单元素作为字段组发送提供在发送Ajax请求之前验证更改的方法经过严格测试安装$ npm install form-async 我们建议从npm安装,然后...
jQuery自定义表单 生成可访问的自定义表单的插件:选择,单选,复选框。 演示: : 用法 <!-- Add jQuery and the plugin file in your HTML page --> < script type =" text/javascript " src =" ...
JQuery-JSON-Form-Binding:一个轻量级插件,用于将JSON数据绑定到表单。 对于使用AJAX和具有大量字段的表单很有用
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
先是尝试了一下 “jQuery Form Plugin” ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值。 $(#view).submit( $(#view)....
form:添加“ajax” “novalidate”和“queryParams”属性; linkbutton:添加“resize”方法 New Plugin(新组件) textbox:该组件是一个增强的输入字段 它可以让用户非常简单的构建一个表单; ...
Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。该表单通过自定义样式和jQuery来将Bootstrap的表单修改为扁平风格的表单,并带有浮动标签特效。 在线预览 源码下载 使用...
本文收集了非常棒的jQuery表单插件与大家分享,欢迎大家推荐更多更好的插件。 1- jQuery inline form validation 2- Uniform 3- Autotab 4- jquery Niceforms 5- jquery Form Validator 6- Toggle FormText ...
图像上传器Image-Uploader是一个简单的jQuery拖放式图像上传器插件,无需使用AJAX就可以在表单中使用。重要的提醒该插件使用 。 因此,这不是跨浏览器解决方案。 不过,在Chrome上一切正常。 有关更多详细信息,请...