How jquery prevents Ajax from repeatedly submitting _jquery

First of all, what does it mean to prevent a repeat-click submission?

We visit some sites, enter the form completed, click the Submit button to submit, the submit button will become gray, the user can not click the second time, until the page reload or jump. This prevents the user from repeatedly submitting a logical error on the application.

As you can see, it does not necessarily occur on the form's submission events, but also on the Ajax asynchronous request. Effective in the Web client to adopt a certain mechanism to prevent repeated click to submit, will greatly reduce server-side pressure.

Below look at the code about jquery Ajax to prevent duplicate submissions.

* * jquery ajax request filtering to prevent AJAX requests to repeat the send, the AJAX send Error Unified processing/$ (function () {var pendingrequests = {};//Universal Front filter for all AJAX requests $.aj Axprefilter (function (options, originaloptions, jqxhr) {var key = Generatependingrequestkey (options);//Whether the request already exists if (!pe Ndingrequests[key]) {storependingrequest (KEY,JQXHR);}
else{//If the AJAX request already exists, the next time the same request is canceled to prevent the duplicate request Jqxhr.abort (); When//ajax request completes, the data from the temporary object is purged from the request, var complete = options.complete; Options.complete = function (JQXHR, textstatus) {//delay 1000 milliseconds to delete request information, indicating that the same key value request cannot be committed repeatedly within this time period settimeout (function () {Delete
Pendingrequests[jqxhr.pendingrequestkey];
},1000);
if ($.isfunction (complete)) {complete.apply (this, arguments);}};
Unified error-handling var error = Options.error; Options.error = function (JQXHR, textstatus) {ErrorHandler (JQXHR, textstatus); if ($.isfunction (Error)) {error.apply (
this, arguments);
}
};
});
/** * When an error occurs in an AJAX request, the method of uniformly intercepting and handling is * * Function ErrorHandler (JQXHR, textstatus) {switch (jqxhr.status) {case (500):
Internalerror (JQXHR);
Break Case (403): AccessDenied (jqxHR);
Break
Case (408): Timeouterror (JQXHR);
Break
Case (404): Pagenotfound (JQXHR);
Break
Default://othererror (JQXHR, textstatus); }} function Pagenotfound (JQXHR) {Component.warningmessagebox ({content:) The address or content requested to access does not exist!
"
});
} function AccessDenied (JQXHR) {Component.warningmessagebox ({content:) You do not have permission to do this or page access!
"
});
} function Internalerror (JQXHR) {Component.warningmessagebox ({content:) the server has an error and failed to process your request properly!
"
});
} function Timeouterror (JQXHR) {window.location.href=contextpath + "/j_spring_security_logout";} function Othererror ( JQXHR, Textstatus) {Component.warningmessagebox ({content: unknown error, error code: + textstatus});/** * Store Ajax requests in a temporary object. Used to determine whether a request is already present based on key/function Storependingrequest (key, JQXHR) {Pendingrequests[key] = jqxhr; Jqxhr.pendingrequestkey =
Key /** * builds a temporary storage key based on the AJAX request parameters, where the URL is simply used as a key, * does not take into account the caching problem caused by the same path when the request type is get, the case of using random code to construct the URL/function Generatependingrequestkey (options) {return options.url;}});

The above is a small series to introduce the jquery to prevent the repeated submission of Ajax methods, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!