防止在服务器处理完成之前用户多次点击提交按钮处理代码

为了防止在服务器处理完成之前用户多次点击提交按钮，你可以通过前端JavaScript来控制按钮的禁用状态。这里提供一个简单的示例代码，该代码会在用户点击提交按钮后立即禁用该按钮，直到服务器响应并重新启用（或根据需要处理）。

HTML 部分（假设你有一个表单和一个提交按钮）：

<form id="myForm">
  <!-- 表单内容 -->
  <button type="button" id="submitBtn">提交</button>
</form>

JavaScript 部分：

document.getElementById('submitBtn').addEventListener('click', function() {
  // 禁用按钮
  this.disabled = true;
  this.textContent = '提交中...'; // 可选：更改按钮文本以显示状态

  // 假设 fetch 用于发送请求到服务器
  fetch('/your-server-endpoint', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      // 你的数据
    }),
  })
  .then(response => response.json())
  .then(data => {
    // 服务器响应处理
    console.log('Success:', data);
    // 在这里，你可以根据服务器的响应来重新启用按钮
    // 例如，假设服务器响应成功，则重新启用按钮
    document.getElementById('submitBtn').disabled = false;
    document.getElementById('submitBtn').textContent = '提交';
  })
  .catch((error) => {
    console.error('Error:', error);
    // 如果发生错误，你也可以选择重新启用按钮，但最好给出错误提示
    document.getElementById('submitBtn').disabled = false;
    document.getElementById('submitBtn').textContent = '提交失败，请重试';
  });
});

请注意，这只是一个基本示例，具体实现可能需要根据你的实际情况进行调整。例如，你可能需要处理更复杂的表单数据，或者你可能需要在禁用按钮之前进行表单验证。

此外，如果服务器响应需要较长时间，并且用户可能会关闭浏览器或离开页面，那么你可能还需要考虑实现一些机制来确保服务器端能够处理这种情况（例如，使用令牌或唯一标识符来跟踪每个请求）。然而，这些都不在这个简单示例的范围内。