jQuery Form

jquery

18-4-1 10:56:45

概述

jQuery表单插件可以让你轻松地升级HTML表单使用Ajax。的主要方法，ajaxform和ajaxsubmit，收集信息的形式元素来决定如何管理提交过程。这两种方法都支持多种选项，允许您完全控制数据提交方式。用Ajax提交表单并没有比这更容易！

快速启动指南

1.添加表单页面。只是普通格式，不需要特殊标记：

<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>

2.include jQuery插件和脚本文件的外部形态和初始化脚本

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>

    <script>
        // wait for the DOM to be loaded
        $(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
            $('#myForm').ajaxForm(function() {
                alert("谢谢!");
            });
        });
    </script>
</head>
...

是这么回事！
当提交表单的名称和注释字段将被张贴到comment.php。如果服务器返回成功状态，那么用户将看到一个“谢谢”消息

回调返回数据

$('#myForm').ajaxForm(function(data) {
alert(data);
});

表格插件API

表单插件API提供了几种方法，让您可以轻松地管理表单数据和表单提交。

ajaxForm

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

通过添加所有必要的事件侦听器准备通过Ajax提交的表单。它不提交表格。使用您的文档的准备功能ajaxform准备你的形式Ajax提交

ajaxSubmit

通过Ajax立即提交表单。

$('#myFormId').submit(function() {
// submit the form
$(this).ajaxSubmit();
// return false to prevent normal browser submit and page navigation
return false;
});

resetForm

通过调用表单元素的本机DOM方法将表单重置为初始状态。

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

clearForm



清除表单元素。
$('#myFormId').clearForm();

带参数版
// prepare Options Object

var options = {
    target:     '#divToUpdate',
    url:        'comment.php',
    success:    function() {
        alert('Thanks for your comment!');
    }
};

$('#myForm').ajaxForm(options);





url 将提交表单数据的URL。
默认值：表单动作属性的值


type 表单数据应该提交的方法，“GET”或“POST”。
默认值：窗体的方法属性值（如果没有找到默认GET）


success 在表单提交后调用的回调函数。如果提供了“成功”回调函数，则在服务器返回响应后调用该函数。

resetForm 布尔标志，指示如果提交成功，是否应重新设置窗体。

error

发生错误的回调函数

clearForm
布尔标志，指示在提交成功时是否应清除表单。

dataType
包含与表单一起提交的额外数据的对象。
data: { key1: 'value1', key2: 'value2' }

dataType
预期的数据类型的响应

---------------------------------------

jQuery表单插件 jQuery.form

这是一个全面支持表单的jQuery插件，支持文件上传，包含以下一些方法：

-ajaxForm
-ajaxSubmit
- formToArray
- formSerialize
- fieldSerialize
- fieldValue
- clearForm
- clearFields
- resetForm

示例代码：

// wait for the DOM to be loaded
$(document).ready(function() {
   // bind 'myForm' and provide a simple callback function
   $('#myForm').ajaxForm(function() {
       alert("Thank you for your comment!");
    });
});

项目主页： http://malsup.com/jquery/form/
下载地址： http://malsup.com/jquery/form/jquery.form.js