JS Ajax请求如何防止重复提交

JS Ajax请求如何防止重复提交的攻略如下：

1. 基于状态锁的防重复提交

1.1 原理

基于状态锁的防重复提交原理是，在第一次请求（提交表单）时，将提交按钮禁用，等到本次请求成功后，再将提交按钮启用。期间再次点击提交按钮不产生任何反应，从而达到防止重复提交的目的。

1.2 代码示例

$('#form').on('submit', function(e) {
  e.preventDefault();
  var $btn = $(this).find('button[type="submit"]');
  if ($btn.hasClass('disabled')) return; // 如果按钮已经禁用，则不做任何处理
  $btn.addClass('disabled');
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(res) {
      /* 处理请求结果 */
      $btn.removeClass('disabled');
    },
    error: function(err) {
      /* 处理请求错误 */
      $btn.removeClass('disabled');
    }
  });
});

2. 基于请求缓存的防重复提交

2.1 原理

基于请求缓存的防重复提交原理是，在第一次请求（提交表单）时，将请求缓存到浏览器端，等到本次请求完成后，再将请求从缓存中删除。当再次请求时，先检查缓存中是否存在该请求，如果存在则不再发送该请求，从而达到防止重复提交的目的。

2.2 代码示例

var reqCache = {}; // 请求缓存

$('#form').on('submit', function(e) {
  e.preventDefault();
  var key = $(this).serialize();
  if (reqCache[key]) return; // 如果该请求已经缓存，则不做任何处理
  reqCache[key] = true; // 将该请求缓存起来
  $.ajax({
    type: $(this).attr('method'),
    url: $(this).attr('action'),
    data: $(this).serialize(),
    success: function(res) {
      /* 处理请求结果 */
      delete reqCache[key]; // 将该请求从缓存中删除
    },
    error: function(err) {
      /* 处理请求错误 */
      delete reqCache[key]; // 将该请求从缓存中删除
    }
  });
});

以上就是防止JS Ajax请求重复提交的两种方法，可以根据实际需求选择相应的方案来应对重复提交的问题。