如何防止jQuery Ajax中的多个请求

时间:2018-07-27 10:00:09

标签: jquery html ajax

这是我的代码,我试图防止jQuery Ajax中的多个请求;

$('#applymentin').submit(function(e)
{
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: url + 'postmenin',
        headers: {
            'mentor_id': window.localStorage.getItem('tmpmenid'),
            'user_id': window.loc
            alStorage.getItem('user_id')
        },

        data: new FormData(this),

        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            alert(data.message);

        },
        error: function(jqXHR, textStatus, errorThrown,data){
          alert("check your connection");
        }
        });
    });

4 个答案:

答案 0 :(得分:1)

我认为您的js文件以多种形式提交。因此,您需要绑定和取消绑定表单Submit。示例代码

 $('#applymentin').unbind('submit').bind('submit',function(e){
e.preventDefault();
  //get the data, coercing to numeric
  let postAttemptCount = $(this).data("postattempt")*1;
  if (postAttemptCount < 5) {
    // increment the count
    $(this).data("postattempt", postAttemptCount + 1);
    $.ajax({
      type: 'POST',
      url: url + 'postmenin',
      headers: {
        'mentor_id': window.localStorage.getItem('tmpmenid'),
        'user_id': window.loc
        alStorage.getItem('user_id')
      },

      data: new FormData(this),

      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        alert(data.message);
      },
      error: function(jqXHR, textStatus, errorThrown, data) {
        alert("check your connection");
      }
    });
  }
});

尝试一下,它将起作用

答案 1 :(得分:0)

您的问题中没有很多信息,但是我想您担心OPTIONS请求。可以提出此请求。如果我说得对,您可以阅读有关CORS的信息。

答案 2 :(得分:0)

我将尝试我想您的愿望是接受最多5次而不是6次的帖子。为此,我只需要使用一个计数器,然后在第5次之后拒绝该尝试即可。这应该很容易完成。我将使用您的表单并保存数据以避免全局变量。

$('#applymentin').submit(function(e) {
  e.preventDefault();
  //get the data, coercing to numeric
  let postAttemptCount = $(this).data("postattempt")*1;
  if (postAttemptCount < 5) {
    // increment the count
    $(this).data("postattempt", postAttemptCount + 1);
    $.ajax({
      type: 'POST',
      url: url + 'postmenin',
      headers: {
        'mentor_id': window.localStorage.getItem('tmpmenid'),
        'user_id': window.loc
        alStorage.getItem('user_id')
      },

      data: new FormData(this),

      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        alert(data.message);
      },
      error: function(jqXHR, textStatus, errorThrown, data) {
        alert("check your connection");
      }
    });
  }
});
<form id="applymentin" data-postattempt="0">
  my form stuff here
</form>

答案 3 :(得分:0)

看看这一行:if(ajax) ajax.abort();

var ajax = false
$(document).on("keyup",'#search-top',function(e){
    $('.header-search-result-inner').html('');
    e.stopImmediatePropagation();
    let keyword = $(this).val();
    if(keyword.length > 2) {
        $('#search-ajax-loader').fadeIn();
        if(ajax) ajax.abort();
        ajax = $.ajax({
            type: "POST",
            url: '/search',
            data: {keyword: keyword},
            dataType: 'html',
            success: function (info) {
                $('.header-search-result').show();
                $('.header-search-result-inner').append(info);
            },
            complete: function () {
                $('#search-ajax-loader').fadeOut();
            }
        });
    }else {
        $('.header-search-result').hide();
        $('#search-ajax-loader').fadeOut();
    }

});