Javascript Ajax在一个PHP页面中提交多个单独的表单(具有相同的表单结构)

在一个PHP页面中使用JavaScript Ajax提交多个单独的表单，可以通过以下步骤实现：

首先，确保页面中引入了jQuery或其他支持Ajax的JavaScript库。
在HTML中，为每个表单添加一个唯一的标识符或类名，以便在JavaScript中选择它们。
使用JavaScript编写一个函数，该函数将在表单提交时被调用。该函数应该执行以下操作：
- 阻止表单的默认提交行为，以便使用Ajax进行异步提交。
- 获取表单的数据，可以使用jQuery的serialize()方法或手动获取每个表单字段的值。
- 使用Ajax发送POST请求到服务器，将表单数据作为参数传递。
- 在Ajax请求成功后，可以根据需要执行一些操作，例如显示成功消息或更新页面内容。

下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    function submitForm(formId) {
      event.preventDefault(); // 阻止表单默认提交行为

      var formData = $('#' + formId).serialize(); // 获取表单数据

      $.ajax({
        url: 'submit.php', // 提交到的PHP页面
        type: 'POST',
        data: formData,
        success: function(response) {
          // 请求成功后的操作
          console.log(response);
        },
        error: function(xhr, status, error) {
          // 请求失败后的操作
          console.log(error);
        }
      });
    }
  </script>
</head>
<body>
  <form id="form1" onsubmit="submitForm('form1');">
    <!-- 表单1的字段 -->
    <input type="text" name="field1" />
    <input type="submit" value="提交" />
  </form>

  <form id="form2" onsubmit="submitForm('form2');">
    <!-- 表单2的字段 -->
    <input type="text" name="field1" />
    <input type="submit" value="提交" />
  </form>

  <!-- 其他表单... -->
</body>
</html>

在上述示例中，我们使用了jQuery库来简化Ajax请求的编写。每个表单都有一个唯一的ID，并在onsubmit事件中调用submitForm()函数来提交表单数据。在submitForm()函数中，我们使用serialize()方法获取表单数据，并使用Ajax发送POST请求到服务器。

请注意，上述示例中的代码仅用于演示目的，实际应用中可能需要根据具体需求进行修改和完善。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）、腾讯云数据库MySQL版（TencentDB for MySQL）等。您可以访问腾讯云官网了解更多产品信息和详细介绍。

参考链接：