jquery $.ajax two ways to prevent duplicate submissions (recommended) _jquery

Here are two ways to prevent duplicate submissions on jquery Ajax, as described below:

1, the first, for the onclick event triggered by Ajax

You can use the following methods:

That is, the click button is not available in the Beforesend, and the AJAX results are returned to the available

$.ajax ({type: ' POST ', url:app+ '? m=shopping&a=ajaxsubmitorder&sid= ' +sid+ ' &src= ' +src, Cache:false, DataType: ' JSON ', data: {' src ': src, ' uid ': uid, ' shipping_id ': shipping_id, ' order_amount ': order_amount, ' Amount ': Amount, ' PostScript ':p ostscript, ' addr_id ': addr_id}, Async:false, Beforesend:function () {//triggering an AJAX request to execute $ (' #submit_
Font '). Text (' Submit order ... '); $ ('. Pay_alipay '). attr (' onclick ', ' javascript:void (); '); /Change the text on the Submit button and set the button to not clickable}, Success:function (msg, textstatus) {if (msg.result==1) {$.
Alert (' Successful submission of order ', 160); window.location.href=app+ ' m=pay&a=index&sid= ' + sid + ' &fuid= ' + fuid + ' &parent_order_sn= ' +
MSG.PARENT_ORDER_SN; } else {$.
Alert (msg.msg, 160);
$ (' #submit_font '). Text (' Submit order '); $ ('. Pay_alipay '). attr (' onclick ', ' submitorder (); '); /Change the text on the Submit button and set the button to clickable}, Error:function (Textstatus) {$.
Alert (' network busy, please try again later ... ', 160);
$ (' #submit_font '). Text (' Submit order '); $ ('. Pay_alipay '). attr (' onclick ', ' submitorder (); '); /Change the text on the Submit button and set the button to clickable}, Complete:function (msg, textsTatus) {//ajax execute if (msg.result==1) {$ (' #submit_font ') when the request completes. Text (' Submit order '); $ ('. Pay_alipay '). attr (' onclick ', ' Javascript:void (); ');  /Change the text on the Submit button and set the button to be clickable}});

2. Use jquery Ajaxprefilter Interrupt Request

1 Prefilters is a pre filter that is sent and $.ajax () to process them before each request.

Options is the requested option

Originaloptions value as an unmodified option provided to the Ajax method, so there is no default value in the Ajaxsettings setting

JQXHR is the requested JQXHR object

The core idea of the above is to maintain a queue, send a request, the request to join the queue, request a response, clear from the queue, which ensures that at any one time only one of the same request sent.

Limitations: Just the front desk's AJAX request to prevent jquery. Ajax requests for non-jquery do not work. Because it uses the Ajaxprefilter function of jquery, it only works on jquery's AJAX requests.

2 button Each Click will be sent back to the request, the following demo implementation of multiple Click button, only to ensure that the last click of the request can be successful.

<button id= "Button1" >button1</button> <button id= "Button2" >button2</button> <button id= " Button3 ">button3</button> <script type=" Text/javascript "src=" Jquery.min.js "></script> <
script> var pendingrequests = {}; Jquery.ajaxprefilter (function (options, originaloptions, jqxhr) {var key = Options.url; Console.log (key); if (!pendingre Quests[key]) {Pendingrequests[key] = JQXHR;}
else{//jqxhr.abort ();//Discard after the triggering of the submission of Pendingrequests[key].abort ();//Discard first triggered submission} var complete = Options.complete; Options.complete = function (JQXHR, textstatus) {Pendingrequests[key] = null; if (jquery.isfunction (complete)) {complete
. apply (this, arguments);
}
};
});
<!--start the application list asynchronously--> $ ("#button1"). Live ("Click", Function () {$.ajax (' Config/ajax/appinfolistfetcher.json '), { Type: ' POST ', data: {param1:1, Param2:2,}, Success:function (res) {//back-end data writeback to page}, Error:function (JQXHR, Textstatus, Erro Rthrown) {if (Errorthrown!= ' abort ') {alert (' Application load failed!
');
}
}
});<!--asynchronous Load application list end-->}); </script>

After invoking Abort, jquery executes the method of error, throwing abort exception information. You can distinguish between exceptions of this type using the following methods.

3 Note: For the nested Click event code, it does not work.

$ ('. Btn-cancel-all '). Live (' click ', function ()
{
$ (' Confirm-dialog. Confirm '). Live (' click ', Function ()
{
$.ajax ({
//This AJAX event is not working
}
}}

The above is a small set to introduce the jquery $.ajax to prevent repeated submissions of the two methods (recommended), 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!