`

jQuery Form Plugin

阅读更多

 

Form Plugin API

http://malsup.com/jquery/form/#getting-started

 

The Form Plugin API provides several methods that allow you to easily manage form data and form submission.

ajaxForm
Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. Use ajaxForm in your document's ready function to prepare your form(s) for AJAX submission. ajaxForm takes zero or one argument. The single argument can be either a callback function or an Options Object.
Chainable: Yes.

Note: You can pass any of the standard $.ajax options to ajaxForm

Example:

$('#myFormId').ajaxForm();
ajaxSubmit
Immediately submits the form via AJAX. In the most common use case this is invoked in response to the user submitting the form. ajaxSubmit takes zero or one argument. The single argument can be either a callback function or an Options Object.
Chainable: Yes.

Note: You can pass any of the standard $.ajax options to ajaxSubmit

Example:

// attach handler to form's submit event 
$('#myFormId').submit(function() { 
    // submit the form 
    $(this).ajaxSubmit(); 
    // return false to prevent normal browser submit and page navigation 
    return false; 
});
formSerialize
Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2
Chainable: No, this method returns a String.

Example:

var queryString = $('#myFormId').formSerialize(); 
 
// the data could now be submitted using $.get, $.post, $.ajax, etc 
$.post('myscript.php', queryString); 
        
fieldSerialize
Serializes field elements into a query string. This is handy when you need to serialize only part of a form. This method will return a string in the format: name1=value1&name2=value2
Chainable: No, this method returns a String.

Example:

var queryString = $('#myFormId .specialFields').fieldSerialize();
fieldValue
Returns the value(s) of the element(s) in the matched set in an array. As of version .91, this method always returns an array. If no valid value can be determined the array will be empty, otherwise it will contain one or more values.
Chainable: No, this method returns an array.

Example:

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]); 
resetForm
Resets the form to its original state by invoking the form element's native DOM method.
Chainable: Yes.

Example:

$('#myFormId').resetForm();
clearForm
Clears the form elements. This method emptys all of the text inputs, password inputs and textarea elements, clears the selection in any select elements, and unchecks all radio and checkbox inputs.
Chainable: Yes.
$('#myFormId').clearForm();
clearFields
Clears field elements. This is handy when you need to clear only a part of the form.
Chainable: Yes.
$('#myFormId .specialFields').clearFields();

The Options Object

Note: You can pass any of the standard $.ajax options to ajaxForma and ajaxSubmit.

Both ajaxForm and ajaxSubmit support numerous options which can be provided using an Options Object. The Options Object is simply a JavaScript Object that contains properties with values set as follows:

target
Identifies the element(s) in the page to be updated with the server response. This value may be specified as a jQuery selection string, a jQuery object, or a DOM element.
Default value: null
url
URL to which the form data will be submitted.
Default value: value of form's action attribute
type
The method in which the form data should be submitted, 'GET' or 'POST'.
Default value: value of form's method attribute (or 'GET' if none found)
beforeSubmit
Callback function to be invoked before the form is submitted. The 'beforeSubmit' callback can be provided as a hook for running pre-submit logic or for validating the form data. If the 'beforeSubmit' callback returns false then the form will not be submitted. The 'beforeSubmit' callback is invoked with three arguments: the form data in array format, the jQuery object for the form, and the Options Object passed into ajaxForm/ajaxSubmit. The array of form data takes the following form:
[ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
Default value: null
success
Callback function to be invoked after the form has been submitted. If a 'success' callback function is provided it is invoked after the response has been returned from the server. It is passed the responseText or responseXML value (depending on the value of the dataType option).

Default value: null

dataType
Expected data type of the response. One of: null, 'xml', 'script', or 'json'. The dataType option provides a means for specifying how the server response should be handled. This maps directly to the jQuery.httpData method. The following values are supported:

'xml': if dataType == 'xml' the server response is treated as XML and the 'success' callback method, if specified, will be passed the responseXML value

'json': if dataType == 'json' the server response will be evaluted and passed to the 'success' callback, if specified

'script': if dataType == 'script' the server response is evaluated in the global context

Default value: null

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".
Default value: false
resetForm
Boolean flag indicating whether the form should be reset if the submit is successful
Default value: null
clearForm
Boolean flag indicating whether the form should be cleared if the submit is successful
Default value: null
iframe
Boolean flag indicating whether the form should always target the server response to an iframe. This is useful in conjuction with file uploads. See the File Uploads documentation on the Code Samples page for more info.
Default value: false

Example:

// prepare Options Object 
var options = { 
    target:     '#divToUpdate', 
    url:        'comment.php', 
    success:    function() { 
        alert('Thanks for your comment!'); 
    } 
}; 
 
// pass options to ajaxForm 
$('#myForm').ajaxForm(options); 

Note that the Options Object can also be used to pass values to jQuery's $.ajax method. If you are familiar with the options supported by $.ajax you may use them in the Options Object passed to ajaxForm and ajaxSubmit.

分享到:
评论

相关推荐

    jquery-form.js

    《jQuery Form Plugin详解及其在异步表单提交与文件上传中的应用》 jQuery Form Plugin是一款强大的JavaScript库,专为了解决使用jQuery进行异步表单提交(Ajax Form Submission)和文件上传的问题。它通过扩展...

    jquery.form.js和使用说明

    《jQuery Form Plugin的详解与应用》 在Web开发中,jQuery是一个极其强大的JavaScript库,它极大地简化了DOM操作,事件处理以及Ajax交互等任务。而jQuery Form Plugin是jQuery的一个扩展,专门为表单处理提供了丰富...

    jquery.form.js下载

    jquery.form.js jquery.form.js

    jqueryform的guangwang,wuxia

    标题 "jqueryform的guangwang,wuxia" 暗示了我们正在讨论关于 jQuery Form 插件的一个特定主题,可能涉及到使用此插件在网页上实现动态交互或表单验证的功能。描述中的 "jqueryform的guangwangjqueryform的...

    jQuery.form.js

    《jQuery Form Plugin 3.51.0:深入解析与应用》 jQuery Form Plugin是一款广泛应用于Web开发中的JavaScript库,其主要目标是简化HTML表单的处理,包括提交、异步上传以及各种验证功能。这款插件的核心在于它提供了...

    Form Plugin API

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

    jquery.form.min.js(4.2.2version,最新版本)

    * jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: https://github.com/jquery-form/form * Copyright 2017 Kevin Morris * Copyright 2006 M. Alsup * Dual ...

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

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

    jquery.form.js

    《jQuery Form Plugin 深入解析与应用》 在Web开发中,jQuery库以其简洁的API和强大的功能深受开发者喜爱,而`jquery.form.js`则是jQuery的一个重要插件,它扩展了jQuery对表单处理的功能,使得表单的提交、异步...

    jquery form ajax 插件

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

    jquery异步提交form表单

    在IT行业中,jQuery是一个非常流行的...通过使用jQuery Form Plugin和`jquery.form.js`,我们可以轻松实现这一功能,同时也可以根据需要进行定制和扩展。学习并掌握这一技术,对于提升我们的前端开发技能至关重要。

    【springmvc+jquery.form.min.js+spring文件上传】

    Spring MVC是一个强大的MVC框架,常用于构建Java Web应用,而jQuery Form Plugin则提供了一种便捷的方式通过AJAX进行表单提交,包括文件上传。在本项目"【springmvc+jquery.form.min.js+spring文件上传】"中,我们将...

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

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

    jQuery form表单美化实例代码

    此外,jQuery还有许多插件可以进一步提升表单的用户体验,例如`jQuery UI`的Autocomplete插件可以实现输入框的自动补全,`jQuery Form Plugin`可以轻松处理表单提交,包括异步提交(AJAX)和文件上传。这些插件通常...

    jquery.form.js(最新的)

    1. **jQuery Form Plugin集成**:首先,需要将jQuery.form.js库引入到项目中,通过`<script>`标签将其添加到HTML页面的头部。然后,可以通过jQuery选择器找到特定的表单元素,并调用`.ajaxSubmit()`方法来实现AJAX...

    java-jquery-form.rar

    jQuery Form Plugin是jQuery的一个扩展,它使得异步表单提交变得简单,支持多种提交方式,如AJAX、上传文件、定时提交等。"jquery-form.js"包含了这些功能的实现代码,开发者可以通过引入这个文件轻松地为表单添加...

Global site tag (gtag.js) - Google Analytics