Question

我想知道在使用jquery和ajax时停止重复提交的最佳方法是什么？

我想出了两种可能的方法，但不确定这些是否只有2种。

在Ajax启动时禁用所有按钮，直到请求完成。我看到的2个问题虽然是我使用jquery模型对话框所以我不知道禁用那些按钮是多么容易，因为我不确定他们是否有id。第二，如果请求挂起，用户实际上无法再次尝试，因为所有按钮都被禁用。
我正在寻找一种名为AjaxQueue的东西，此时我不知道它是否是我需要的，或者它是如何工作的，因为该插件显然需要进行维护。

http://docs.jquery.com/AjaxQueue

修改

我认为这是我所看到的内容。

http://www.protofunc.com/scripts/jquery/ajaxManager/

我在这个ajaxManager中遇到的唯一问题是我认为我必须将所有$ .post，$ .get和$ .ajax更改为其类型。

但是如果我需要来自$ .ajax的特殊参数会发生什么？或者我喜欢使用.post和.get。

修改2

我认为它可以包含所有$ .ajax选项。我还在调查它。但是我现在不确定的是，我可以对将使用相同选项的所有请求使用相同的构造函数。

First you have to construct/configure a new Ajaxmanager
//create an ajaxmanager named someAjaxProfileName
var someManagedAjax = $.manageAjax.create('someAjaxProfileName', {
    queue: true, 
    cacheResponse: true
});

或者我每次都必须完成上述操作？

Answer 1

当用户点击按钮时设置标志怎么样？只有在AJAX请求成功完成时才会清除该标志（在complete中，在success和error回调之后调用），并且只有在发送标志时才会发送AJAX请求没有设定。

与AJAX排队相关的是一个名为jQuery Message Queuing的插件非常好。我自己用过它。

var requestSent = false;

jQuery("#buttonID").click(function() {   
   if(!requestSent) {
      requestSent = true;

      jQuery.ajax({
         url: "http://example.com",
         ....,
         timeout: timeoutValue,
         complete: function() {
             ...
             requestSent = false;
         },
      });
   }
});

如果您认为您的请求有可能挂起，则可以为长时间运行的请求设置超时值（值以毫秒为单位）。如果发生超时，则调用error回调，之后调用complete回调。

Answer 2

您可以在变量中存储活动请求，然后在有响应时将其清除。

var request;  // Stores the XMLHTTPRequest object

$('#myButton').click(function() {
    if(!request) {  // Only send the AJAX request if there's no current request 

        request = $.ajax({  // Assign the XMLHTTPRequest object to the variable
            url:...,
            ...,
            complete: function() { request = null } // Clear variable after response
        });

    }
});

修改

关于这一点的一个好处是，您可以使用abort()取消长时间运行的请求。

var request; // Stores the XMLHTTPRequest object var timeout; // Stores timeout reference for long running requests $('#myButton').click(function() { if(!request) { // Only send the AJAX request if there's no current request request = $.ajax({ // Assign the XMLHTTPRequest object to the variable url:..., ..., complete: function() { timeout = request = null } // Clear variables after response }); timeout = setTimeout( function() { if(request) request.abort(); // abort request }, 10000 ); // after 10 seconds } });

Answer 3

$.xhrPool = {};
$.xhrPool['hash'] = []
$.ajaxSetup({
    beforeSend: function(jqXHR,settings) {
        var hash = settings.url+settings.data
        if ( $.xhrPool['hash'].indexOf(hash) === -1 ){
            jqXHR.url   = settings.url;
            jqXHR.data  = settings.data;
            $.xhrPool['hash'].push(hash);
        }else{
            console.log('Duplicate request cancelled!');
            jqXHR.abort();
        }
    },
    complete: function(jqXHR,settings) {
        var hash = jqXHR.url+jqXHR.data 
            if (index > -1) {
                $.xhrPool['hash'].splice(index, 1);
            }
        }
    });

停止重复的Ajax提交？

3 个答案: