/*
* jQuery form plugin
* @requires jQuery v1.1 or later
*
* Examples at: http://malsup.com/jquery/form/
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* Revision: $Id$
* Version: 1.0.3
*/
(function($) {
/**
* ajaxSubmit() provides a mechanism for submitting an HTML form using AJAX.
*
* ajaxSubmit accepts a single argument which can be either a success callback function
* or an options Object. If a function is provided it will be invoked upon successful
* completion of the submit and will be passed the response from the server.
* If an options Object is provided, the following attributes are supported:
*
* 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 method to be invoked before the form is submitted.
* default value: null
*
* success: Callback method to be invoked after the form has been successfully submitted
* and the response has been returned from the server
* default value: null
*
* dataType: Expected dataType of the response. One of: null, 'xml', 'script', or 'json'
* default value: null
*
* semantic: Boolean flag indicating whether data must be submitted in semantic order (slower).
* default value: false
*
* resetForm: Boolean flag indicating whether the form should be reset if the submit is successful
*
* clearForm: Boolean flag indicating whether the form should be cleared if the submit is successful
*
*
* 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, and the options object passed into ajaxSubmit.
* The form data array takes the following form:
*
* [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
*
* If a 'success' callback method is provided it is invoked after the response has been returned
* from the server. It is passed the responseText or responseXML value (depending on dataType).
* See jQuery.ajax for further details.
*
*
* 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
*
*
* Note that it does not make sense to use both the 'target' and 'dataType' options. If both
* are provided the target will be ignored.
*
* The semantic argument can be used to force form serialization in semantic order.
* This is normally true anyway, unless the form contains input elements of type='image'.
* If your form must be submitted with name/value pairs in semantic order and your form
* contains an input of type='image" then pass true for this arg, otherwise pass false
* (or nothing) to avoid the overhead for this logic.
*
*
* When used on its own, ajaxSubmit() is typically bound to a form's submit event like this:
*
* $("#form-id").submit(function() {
* $(this).ajaxSubmit(options);
* return false; // cancel conventional submit
* });
*
* When using ajaxForm(), however, this is done for you.
*
* @example
* $('#myForm').ajaxSubmit(function(data) {
* alert('Form submit succeeded! Server returned: ' + data);
* });
* @desc Submit form and alert server response
*
*
* @example
* var options = {
* target: '#myTargetDiv'
* };
* $('#myForm').ajaxSubmit(options);
* @desc Submit form and update page element with server response
*
*
* @example
* var options = {
* success: function(responseText) {
* alert(responseText);
* }
* };
* $('#myForm').ajaxSubmit(options);
* @desc Submit form and alert the server response
*
*
* @example
* var options = {
* beforeSubmit: function(formArray, jqForm) {
* if (formArray.length == 0) {
* alert('Please enter data.');
* return false;
* }
* }
* };
* $('#myForm').ajaxSubmit(options);
* @desc Pre-submit validation which aborts the submit operation if form data is empty
*
*
* @example
* var options = {
* url: myJsonUrl.php,
* dataType: 'json',
* success: function(data) {
* // 'data' is an object representing the the evaluated json data
* }
* };
* $('#myForm').ajaxSubmit(options);
* @desc json data returned and evaluated
*
*
* @example
* var options = {
* url: myXmlUrl.php,
* dataType: 'xml',
* success: function(responseXML) {
* // responseXML is XML document object
* var data = $('myElement', responseXML).text();
* }
* };
* $('#myForm').ajaxSubmit(options);
* @desc XML data returned from server
*
*
* @example
* var options = {
* resetForm: true
* };
* $('#myForm').ajaxSubmit(options);
* @desc submit form and reset it if successful
*
* @example
* $('#myForm).submit(function() {
* $(this).ajaxSubmit();
* return false;
* });
* @desc Bind form's submit event to use ajaxSubmit
*
*
* @name ajaxSubmit
* @type jQuery
* @param options object literal containing options which control the form submission process
* @cat Plugins/Form
* @return jQuery
*/
$.fn.ajaxSubmit = function(options) {
if (typeof options == 'function')
options = { success: options };
options = $.extend({
url: this.attr('action') || window.location,
type: this.attr('method') || 'GET'
}, options || {});
var a = this.formToArray(options.semantic);
// give pre-submit callback an opportunity to abort the submit
if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) return this;
// fire vetoable 'validate' event
var veto = {};
$.event.trigger('form.submit.validate', [a, this, options, veto]);
if (veto.veto)
return this;
var q = $.param(a);//.replace(/%20/g,'+');
if (options.type.toUpperCase() == 'GET') {
options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q;
options.data = null; // data is null for 'get'
}
else
options.data = q; // data is the query string for 'post'
var $form = this, callbacks = [];
if (options.resetForm) callbacks.push(function() { $form.resetForm(); });
if (options.clearForm) callbacks.push(function() { $form.clearForm(); });
// perform a load on the target only if dataType is not provided
if (!options.dataType && options.target) {
var oldSuccess = options.success;// || function(){};
callbacks.push(function(data) {
$(options.target).attr("innerHTML", data).evalScripts().each(oldSuccess, arguments);
});
}
- 1
- 2
前往页