jQuery 表单插件 -- Form

1、Form 插件简介

jQuery Form 插件是一个优秀的 Ajax 表单插件,可以非常容易地、无侵入地升级 HTML 表单以支持 Ajax。

jQuery Form 有两个核心方法 --- ajaxForm( ) 和 ajaxSubmit( ),它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其它的一些方法:formToArray( ), formSerialize( ), fieldSerialize( ), clearForm( ), clearFields( )和 resetForm( )等。

2、插件下载地址:

http://malsup.com/jquery/form/

里面提供了插件下载,API 和实例代码讲解,都是英文的

3、快速上手

HTML代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="//cdn.bootcss.com/bootstrap/2.0.4/css/bootstrap.css" rel="stylesheet">
</head>
<body>

<form role="form" id="myForm" action="demo.php" method="post">
    <div class="form-group">
        <label for="uName">姓名:</label>
        <input type="text" name="uName" id="uName">
    </div>
    <div class="form-group">
        性别:
        <label class="radio inline">
            <input type="radio" name="gender" id="male" value="male">男
        </label>
        <label class="radio inline">
            <input type="radio" name="gender" id="female" value="female">女
        </label>
    </div>
    <div class="form-group">
        <label for="age">年龄:</label>
        <input type="text" name="age" id="age">
    </div>
    <button type="submit" class="btn btn-success">提交</button>
    <div id="output" style="display:none"></div>
</form>

<script src="resources/js/jquery-1.8.3.min.js"></script>
<script src="resources/js/jquery.form.js"></script>
<script>
    $(‘#myForm‘).ajaxForm(function(){
        $(‘#output‘).html(‘提交成功!欢迎下次再来!‘).show();
    })
</script>
</body>
</html>

页面截图:

当表单被提交时,“姓名”、“性别”和“年龄”的值会以无刷新的方式提交到 demo.php文件中。如果服务器返回一个成功的状态,那么,用户将看到“提交成功!欢迎下次再来!”的提示。

4、核心方法 --- ajaxForm( ) 和 ajaxSubmit( )

如上例所示,通过核心方法 ajaxForm( ),能很容易地将表单升级为 Ajax 提交方式

$(‘#myForm‘).ajaxForm(function(){
    $(‘#output‘).html(‘提交成功!欢迎下次再来!‘).show();
})

Form 插件还有一个核心方法 ajaxSubmit( ),也能完成同样的功能,代码如下:

$(‘#myForm‘).submit(function(){
    $(this).ajaxSubmit(function(){
        $(‘#output‘).html(‘提交成功!欢迎下次再来!‘).show();
    });
    return false;  //阻止表单默认提交
})

通过调用 ajaxSubmit( ) 方法来响应用户的提交表单操作,从而使表单的提交方式由传统的提交方式转变为 Ajax 提交方式。

区别:

ajaxForm( ) 不能提交表单,在document的ready方法中,使用ajaxForm( )为 Ajax 提交表单进行准备,必须由submit 提交;

ajaxSubmit( ) 通过 Ajax 立即提交表单,在大多数情况下,点击提交按钮以后都是通过这个方法来提交表单

ajaxForm( ) 和 ajaxSubmit( )方法都能接受 0个 或者 1个参数,如果是单个的参数,该参数既可以是一个回调函数,也可以是一个 options 对象。前面的例子中,使用的就是回调函数,现在来了解下options对象,显然,这样可以对表单拥有更多的控制权。

首先定义一个对象 options,然后在对象里面设置参数,代码示例如下:

var options={
    target:‘#output‘,   //把服务器返回的内容放到id为output的元素中
    beforeSubmit:showRequest,  //提交前的回调函数
    success: showResponse,     //提交后的回调函数
    //url: url,                //默认是form的action,如果声明,则会被覆盖
    //type: type,              //默认是form的method(get 或 post),如果声明,则会被覆盖
    //dataType: null,          //‘xml‘, ‘script‘, ‘json (接受服务端返回的类型)‘
    //clearForm: true,         //成功提交后,清除所有表单元素的值
    //resetForm: true,         //成功提交后,重置所有表单元素的值
    //timeout:3000             //限制请求的时间,当请求大于3s,跳出请求
}

这里还有一张更详细的列表:

属性 描述
url Ajax请求将要提交到该url,默认是表单的action属性值
type
指定提交表单数据的方法(method):“GET”或“POST”。

默认值:表单的method属性值(如果没有找到默认为“GET”)。

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

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

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

‘script’:如果dataType == ‘script’, 服务器响应将求值成纯文本。。

默认值:null(服务器返回responseText值)

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

默认值:null。

beforeSubmit
表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。

如果“beforeSubmit”回调函数返回false,那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数:数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。

默认值:null

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

默认值:null

clearForm 表示如果表单提交成功是否清除表单数据。默认值:null
resetForm 表示如果表单提交成功是否进行重置。默认值: null

下面看看 beforeSubmit 和 success 两个回调函数:

  • beforeSubmit --- 提交前的回调函数

提交前的回调函数的代码如下:

function showRequest(formData, jqForm, options){
    var queryString = $.param(formData);
    return true;
}

这个回调函数有3个参数

> formData 是数组对象。在这里,使用 $.param( ) 方法把它转化为字符串,得到如下格式:

name=1&address=2

需要注意的是,当表单提交时,Form插件会以 Ajax方式自动提交这些数据

> jqForm 是一个jQuery 对象,它封装了表单的元素

如果需要访问 jqForm 的DOM元素,可以把 jqForm 转化为 DOM元素

var formElement = jqForm[0];
var address = formElement.address.value;

> options 就是options对象,前面已经声明了一些 options对象里的一些属性,其它没有声明的,则会使用默认的属性。

在这个回调函数中,只要不返回 false,表单都将被允许提交;如果返回 false,则会阻止表单提交。可以利用这个特性,在表单提交之前验证数据,如果不符合验证规则,则阻止表单提交

  • success --- 提交后的回调函数

提交后的回调函数代码如下:

function showResponse(responseText, statusText){
    alert(‘状态:‘+statusText+‘\n 返回的内容是:\n‘+responseText);
}

statusText 只是一个返回状态,例如 success、error等

参数responseText 携带着服务器返回的数据内容。responseText 会根据设置的 options 对象中的 dataType 属性来返回相应格式的内容,具体情况如下:

(1)、对于缺省的 HTML 返回,回调函数的第一个参数是 XMLHttpRequest 对象的 responseText 属性

(2)、当 dataType 属性被设置为 xml 时,回调函数的第一个参数是 XMLHttpRequest 对象的 responseXML属性

例如声明服务器返回数据的类型为 xml,然后以 xml 方式解析数据,代码如下:

$(‘#xmlForm‘).ajaxForm({
    dataType:‘xml‘,
    success: processXml
});
function processXml(responseXML){
    var name = $(‘name‘,responseXML).text();
    var address = $(‘address‘,responseXML).text();
    $(‘#xmlOut‘).html(name+" "+address);
}

(3)、当 dataType 属性被设置为 json 时,回调函数的第一个参数是从服务器返回的 json 对象

例如声明服务器返回数据的类型为 json,然后以 json 方式解析数据,代码如下:

$(‘#jsonForm‘).ajaxForm({
    dataType:‘json‘,
    success:processJson
})
function processJson(data){
    $(‘#jsonOut‘).html(data.name+" "+data.address);
}

5、表单提交之前验证表单

首先定义一个 validate 回调函数,把它设置为 beforeSubmit 的值

beforeSubmit:validate

然后编写 validate 函数,它有 3 个参数

function validate(formData,jqForm,options){
    /*
    *  在这里需要对表单元素进行验证,如果不符合规则,
    *  将返回 false 来阻止表单提交,直至符合规则为止
    * */
    var queryString = $.param(formData); //组装数据
    return true;
}

通过获取表单元素的值,对表单元素进行验证。Form插件获取表单数据的方式有多种,下面介绍其中的3种方式。

  • 方式1:利用参数 formData

参数 formData 是一个数组对象,其中的每个对象都有名称和值,其数据格式如下:

[
    {name:name, value:nameValue},
    {name:password,value:passwordValue}
]

由于是数组,因此可以根据循环来获取每个元素的值,然后判断元素的值是否符合验证规则(这里只判断元素是否为空),如果有一项不符合验证规则,就返回 false,来阻止表单提交

$(function(){
    var options = {
        beforeSubmit: validate,
        resetForm: true,
        dataType:‘json‘
    };
    $(‘#myForm‘).submit(function(){
        $(this).ajaxSubmit(options);
    })
});
function validate(formData,jqForm,options){
    for(var i=0; i<formData.length; i++){
        if(!formData[i].value){
            alert(‘姓名,性别和年龄都不能为空‘);
            return false;
        }
    }
    var queryString = $.param(formData);
    return true;
}
  • 方式2:利用参数 jqForm

参数 jqForm 是一个jQuery 对象,它封装了表单的元素。可以先转成 DOM对象,再来判断

function validate(formData, jqForm, options){
    var form = jqForm[0];
    if(!form.uName.value || !form.gender.value || !form.age.value){
        alert(‘姓名,性别和年龄都不能为空‘);
            return false;
    }
    var queryString = $.param(formData);
    return true;
}
  • 方式3:利用 fieldValue( )方法

fieldValue 方法会把匹配元素的值插入到数组中,然后返回这个数组。如果表单元素的值被判定无效,则数组为空,否则数组将包含一个或多个元素的值。由于返回的是一个数组,而不是 jQuery 对象,因此不能进行链式操作

利用 fieldValue 方法,也能很容易地获取到表单元素的值。例如,可以通过 $(‘input[name="address"]‘).fieldValue() 来获取 name 为“address”的<input>元素的值的数组集合,然后通过数组下标来获取数组中对应的值。

function validate(formData, jqForm, options){
    var uNameValue = $(‘input[name=uName]‘).fieldValue();
    var genderValue = $(‘input[name=gender]‘).fieldValue();
    var ageValue = $(‘input[name=age]‘).fieldValue();
    if(!uNameValue[0] || !genderValue[0] || !ageValue[0]){
        alert(‘姓名,性别和年龄都不能为空‘);
        return false;
    }
    var queryString = $.param(formData);
    return true;
}

时间: 2024-10-11 07:13:57

jQuery 表单插件 -- Form的相关文章

第七章(插件的使用和写法)(7.2 jQuery 表单插件 ----- Form)

7.2 jQuery 表单插件 ----- Form 7.2.1 Form 插件简介 jQuery Form 插件是一个优秀的 Ajax 表单插件,可以非常容易地.无侵入地升级 HTML 表单以支持 Ajax.jQuery Form 有两个核心方法----- ajaxForm()  和 ajaxSubmit() .它们集合了从控制表单元素到决定如何管理提交进程的功能,另外,插件还包括其他一些方法: formToArray() / formSerialize() / fieldSerialize(

【jQuery基础学习】07 jQuery表单插件-Form

作用:jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单,从而使我们提交表单的时候页面不用进行刷新. 它的核心方法是ajaxForm()和ajaxSubmit() 升级表单提交方式的时候很简单,不用去改变HTML结构,如下即可: //就是下面这么简单 $("#myForm").ajaxForm(function(){ //提交成功后的操作 }); //你也可以这样 $("#myform").submit(function(){ $(th

表单插件——form

表单插件——form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). ajaxForm ({options}) 其中form参数表示表单元素名称:options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Jquery表单插件ajaxForm用法详解

插件主要的方法: ajaxFormajaxSubmitformToArrayformSerialize fieldSerializefieldValueclearFormclearFieldsresetForm 示例代码: ? 1 2 3 4 5 6 7 // wait for the DOM to be loaded $(document).ready( function () {      // bind 'myForm' and provide a simple callback func

jQuery表单插件jquery.form.js

概述 jQuery Form Plugin能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm和ajaxSubmit,能够从form组件里采集信息确定如何处理表单的提交过程. 两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制. 入门指导 一.在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: <form id="myForm" action="login.action&quo

jquery表单插件

转:http://www.cnblogs.com/similar/p/3891284.html 表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧: 直接上插件实现代码了,围绕代码进行讲解比较容易点: /* 描述:基于jquery的表单验证插件. 时间:2014-8-3 作者:similar([email protected]) */ (function ($) { $.fn.checkForm = function (option

用PHP关于Jquery表单插件ajaxForm里success不返回问题

简单说一下吧,在用ajaxForm的时候,sucess突然之间不返回了,直接转到error里面去, 网页代码 ................. $('#add-type').ajaxForm({ dataType:'json', beforeSubmit:function(data,$form,options){ $('#myModal').modal(); }, error:function(XmlHttpRequest){ console.log(XmlHttpRequest); }, s

jQuery插件 -- Form表单插件jquery.form.js

jquery.form.js官网 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm(). clearFields

Form表单插件jquery.form.js

常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"><