为何WordPress中AJAX请求执行后会产生重复数据

我来帮你梳理下这个AJAX重复提交数据的常见问题点，你可以逐个排查：

1. 事件绑定被重复触发 #

这是最常见的原因之一。比如你的JS代码可能被加载了多次（比如主题和插件里都引入了这段代码，或者在模板中多次调用了包含这段JS的文件），导致jQuery("#holiday-submit").click()被绑定了多次。每次绑定都会在点击时执行一次AJAX请求，自然就会插入多条重复数据。

解决办法：

• 先检查你的JS是否被重复加载：可以在浏览器控制台的“网络”标签里搜索你的JS文件名，看是否有多次请求记录。
• 改用绑定前先解绑事件的写法，避免重复绑定：

  jQuery("#holiday-submit").off('click').on('click', function(event){
      event.preventDefault();
      // 你的AJAX代码逻辑
  });
  

  用off('click')先移除之前的绑定，再重新绑定，就能避免重复绑定导致的多次请求。

2. 用户多次快速点击按钮 #

如果用户在AJAX请求还没完成的时候就多次点击提交按钮，每个点击都会触发一次新的请求，服务器端就会多次插入数据。

解决办法：

• 在点击按钮后立即禁用按钮，请求完成后再恢复可用状态：

  jQuery(document).ready(function(){
      jQuery("#holiday-submit").click(function(event){
          event.preventDefault();
          var $btn = jQuery(this);
          // 禁用按钮，防止重复点击
          $btn.prop('disabled', true).text('提交中...');
          
          var date = jQuery("#holiday").val();
          var reason =jQuery("#holiday-reason").val();
          
          jQuery.ajax({
              type: 'POST',
              url: MyAjax.ajaxurl,
              data: {"action": "add_holiday", "holiday":date, "reason" :reason},
              success:function(data){
                  // 你的原有成功处理逻辑
                  jQuery("#holiday-st...");
                  // 恢复按钮状态
                  $btn.prop('disabled', false).text('提交');
              },
              error:function(){
                  // 请求失败也要恢复按钮，避免用户无法再次操作
                  $btn.prop('disabled', false).text('提交');
              }
          });
      });
  });
  

3. 服务器端未做重复数据校验 #

即使前端只发送了一次请求，如果服务器端的add_holiday回调函数没有检查当前holiday和reason是否已经存在于数据表中，也可能因为网络重试、请求重复到达等异常情况导致重复插入。

解决办法：

• 在你的PHP回调函数中，先查询数据表是否已存在相同记录，只有不存在时才执行插入操作：

  function add_holiday_callback() {
      $holiday = sanitize_text_field($_POST['holiday']);
      $reason = sanitize_text_field($_POST['reason']);
      
      global $wpdb;
      $table_name = $wpdb->prefix . 'your_custom_table'; // 替换成你的自定义表名
      // 检查是否已有相同记录
      $existing_count = $wpdb->get_var($wpdb->prepare(
          "SELECT COUNT(*) FROM $table_name WHERE holiday = %s AND reason = %s",
          $holiday, $reason
      ));
      
      if ($existing_count == 0) {
          // 不存在则插入数据
          $wpdb->insert(
              $table_name,
              array(
                  'holiday' => $holiday,
                  'reason' => $reason
              ),
              array('%s', '%s')
          );
          wp_send_json_success('假期添加成功');
      } else {
          wp_send_json_error('该假期记录已存在');
      }
      
      wp_die();
  }
  add_action('wp_ajax_add_holiday', 'add_holiday_callback');
  add_action('wp_ajax_nopriv_add_holiday', 'add_holiday_callback'); // 前台用户提交需要的话加上
  

4. 事件冒泡或默认行为未完全阻止 #

虽然你用了event.preventDefault()，但如果按钮嵌套在表单里，或者有父元素的点击事件，可能会触发事件冒泡导致额外请求。可以加上event.stopPropagation()来阻止：

jQuery("#holiday-submit").click(function(event){
    event.preventDefault();
    event.stopPropagation(); // 阻止事件冒泡到父元素
    // 后续AJAX代码
});

你可以先从第一个原因开始排查，重复绑定是最常见的情况，然后再依次检查其他点，应该就能解决重复提交的问题了。

内容的提问来源于stack exchange，提问作者Shirantha