Jquery AJAX请求正在上传数据两次答案

【问题标题】：Jquery AJAX request is uploading the data two timesJquery AJAX请求正在上传数据两次
【发布时间】：2020-04-19 12:31:57
【问题描述】：

我的 AJAX 请求将我的表单数据两次上传到数据库中。

这是AJAX函数

function uploadProjects() {
  let projectName = $('#projectName').val();
  let description = $('#description').val();
  let estimatedTime = $('#estimatedTime').val();
  let actualTime = $('#actualTime').val();

  const formData = {
    projectName: projectName,
    description: description,
    estimatedTime: estimatedTime,
    actualTime: actualTime,
  };
  event.preventDefault();

  $.ajax({
    type: 'POST',
    url: 'http://localhost/WBS/php/api/objects/Project.php',
    data: formData,
    success: (response) => {
      console.log(`The data ${JSON.stringify(response)} has been uploaded`);
      $('#alert').fadeIn(() => {
        setTimeout(() => {
          $('#alert').fadeOut();
        }, 5000);
      });
    },
    error: (response) => {
      console.error(
        `Something went wrong uploading the data ${JSON.stringify(response)}`
      );
      $('#alertFailed').fadeIn(() => {
        setTimeout(() => {
          $('#alertFailed').fadeOut();
        }, 5000);
      });
    },
  });
}

我这样称呼这个函数

$(document).ready(() => {
  $('#addProject').one('click', () => {
    uploadProjects();
  });
});

我在这个html按钮上调用函数

<button id="addProject" form="js-projects" class="btn btn-success" type="submit"><i class="fa fa-angle-right" aria-hidden="true"></i> Add a project</button>

在我的浏览器 (Firefox) 中检查 POST 请求，我可以看到该请求仅对我的 PHP 文件发出一次，该文件会上传所述数据。

检查数据库后，数据已上传两次。

A：问题出在后端，我的查询执行了两次。代表我的愚蠢监督

【问题讨论】：

由于您只发布了一次，所以问题出在 Project.php 内部
您确定默认事件没有发生吗？您也可以提交它并通过 ajax 发送它。

标签： javascript jquery ajax

【解决方案1】：

改成

$(function() => {
  $("#formID").on("submit",uploadProjects);
});

然后

function uploadProjects(e) {
  e.preventDefault();

  // if you do not want to submit again:
  $('#addProject').hide();

  let projectName = $('#projectName').val();
  .....
)

如果仍然保存两次，那么问题出在后端

【讨论】：