`

jQuery Form Plugin:AJAX方式提交表单的完全方案

阅读更多
译自: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
分享到:
评论

相关推荐

    ajaxForm异步提交表单(含图片)

    AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...

    240多个jQuery插件

    1. jQuery Form Plugin:处理表单提交。 2. jQuery-Form:增强表单功能。 3. jLook Nice Forms:美化表单元素。 4. jNice:创建漂亮表单。 5. Ping Plugin:实时验证输入。 6. Toggle Form Text:切换表单文本。 7. ...

    jquery异步提交form表单

    这是jQuery Form Plugin的一个核心文件,它扩展了jQuery,使得我们可以方便地进行异步表单提交。例如,我们可以使用以下代码来实现: ```javascript $("#myForm").submit(function(event) { event.preventDefault...

    JQuerry 插件介绍

    - jQuery Ajax Form Builder:构建动态的AJAX表单。 - jQuery Focus Fields:自动聚焦表单元素。 - jQuery Time Entry:时间输入控件。 5. 时间、日期和颜色选取: - jQuery UI Datepicker:官方提供的日期选择...

    jquery-form.js

    4. **多种提交方式**:除了默认的Ajax提交,jQuery Form Plugin还支持传统的HTTP POST/GET提交,以及multipart/form-data的提交,适应不同场景需求。 5. **丰富的回调函数**:如`beforeSubmit`、`success`、`error`...

    jQuery表单插件jquery.form.js(示例源码)

    jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程。 两个方法都支持众多的...

    jquery form ajax 插件

    1. 插件介绍:jQuery Form Plugin是由Malsup开发的一款插件,它扩展了jQuery的功能,允许我们轻松地使用AJAX方式处理表单提交,实现无刷新的数据交互。这个插件不仅支持GET和POST提交,还支持文件上传,是前端开发中...

    jQuery插件教程(搜罗了全部插件).docx

    - jQuery Ajax Form Builder:构建复杂的AJAX表单。 - jQuery Focus Fields:自动聚焦输入字段。 - jQuery Time Entry:输入时间的插件。 5. **时间、日期和颜色选取类插件**: - jQuery UI Datepicker:提供...

    jquery.form提交方式

    《jQuery Form 提交方式详解》 在Web开发中,jQuery库极大地简化了JavaScript操作,特别是在处理表单提交方面。本文将深入探讨jQuery中处理表单提交的多种方式,结合源码解析,帮助开发者更好地理解和应用。 一、...

    jquery.form.js和使用说明

    而jQuery Form Plugin是jQuery的一个扩展,专门为表单处理提供了丰富的功能,包括异步提交表单、表单验证以及实时反馈等功能。本文将详细解析jQuery Form Plugin的使用及其核心知识点。 首先,`jquery.form.js`是这...

    jQuery.form.js

    jQuery Form Plugin的核心特性在于它的异步提交功能,通过AJAX技术实现了无刷新的数据交互,使得用户在提交表单时无需等待页面刷新,提升了用户体验。该插件支持多种提交方式,如GET和POST,同时也支持...

    jQuery Form Plugin

    jQuery Form Plugin 能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多...

    jqueryform的guangwang,wuxia

    1. **异步提交(AJAX)**:jQuery Form Plugin 可以让你的表单通过 AJAX 方式提交,这意味着用户无需等待页面刷新就能看到反馈,提高了用户体验。通过 `ajaxForm()` 或 `ajaxSubmit()` 方法可以实现这一功能。 2. *...

    jquery.form.js

    《jQuery Form Plugin:简化异步表单提交与文件上传》 在Web开发中,jQuery库以其简洁的API和强大的功能深受开发者喜爱。其中,`jquery.form.js`是jQuery的一个重要插件,它扩展了jQuery的核心功能,使得表单的异步...

    ajaxForm插件

    AjaxForm可以与各种前端表单验证插件(如jQuery Validation Plugin)结合使用,确保在提交表单前数据有效。在`beforeSubmit`回调中,可以调用验证插件的验证方法,如`valid()`。 ## 六、注意事项 - 确保服务器端...

    Ajax使用jQuery提交表单

    jQuery Form Plugin提供了一个更简单的$.ajaxForm()方法,它可以自动处理表单的序列化和提交。首先,需要在项目中引入jQuery Form Plugin,然后可以这样使用: ```javascript $('#myForm').ajaxForm({ url: '...

    jquery ajaxSubmit提交所用到的jquery.form.js

    除了`ajaxSubmit`,jQuery Form Plugin还提供了`ajaxForm`、`serializeArray`、`serialize`等方法,这些方法同样增强了对表单的处理能力。`ajaxForm`是用于自动绑定表单的提交事件,`serializeArray`和`serialize`...

    jQuery.ajaxSubmit:通过ajax发送表单

    `jQuery.ajaxSubmit`是jQuery Form Plugin的一部分,它允许我们利用Ajax技术来无刷新地提交表单,从而改善用户体验。这个插件简化了使用Ajax进行表单提交的过程,避免了页面刷新导致的数据丢失或页面跳转。 **一、...

    jQuery-Form:jQuery 表单插件,版本

    首先,jQuery Form插件的核心特性之一是支持异步表单提交(Ajax)。通过使用Ajax,用户可以在不刷新整个页面的情况下发送表单数据到服务器,提供更好的用户体验。例如,你可以使用`ajaxForm()`或`ajaxSubmit()`方法...

    Form Plugin API

    关于“jqueryform”,这很可能是压缩包中包含的文件,它是jQuery Form Plugin的具体实现。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。jQuery Form Plugin是基于jQuery的一个...

Global site tag (gtag.js) - Google Analytics