ajax 可以传2个表单吗

问题背景

在开发 web 应用程序时，经常需要使用 Ajax 技术来与服务器进行数据交互。在某些情况下，我们可能需要同时传递多个表单的数据给服务器。这个问题就是询问是否可以通过 Ajax 传递两个表单的数据。

解答

是的，Ajax 可以传递多个表单的数据。在实际开发中，有几种方式可以实现这个目标。

首先，可以使用 FormData 对象来收集多个表单的数据。FormData 对象可以将表单数据序列化成键值对，然后通过 Ajax 发送给服务器。以下是一个使用 jQuery 的示例代码：

$(document).ready(function() {
  $('form').submit(function(event) {
    event.preventDefault();
    
    var form1 = new FormData($('form#form1')[0]);
    var form2 = new FormData($('form#form2')[0]);
    
    $.ajax({
      url: 'example.php',
      type: 'POST',
      data: form1,
      processData: false,
      contentType: false,
      success: function(response) {
        // 处理服务器响应
      }
    });
    
    return false;
  });
});

在上面的示例中，我们定义了两个 FormData 对象分别用于收集两个表单的数据。然后，通过 Ajax 发送第一个表单的数据给服务器。需要注意的是，需要将 processData 和 contentType 参数设置为 false，以便确保 FormData 对象的正确传递。

另外一个常用的方法是将多个表单的数据合并成一个 JSON 对象，然后通过 Ajax 发送给服务器。以下是一个纯 JavaScript 的示例代码：

document.getElementById('submit').addEventListener('click', function() {
  var form1Data = new FormData(document.getElementById('form1'));
  var form2Data = new FormData(document.getElementById('form2'));
  
  var jsonData = {};
  
  for (var pair of form1Data.entries()) {
    jsonData[pair[0]] = pair[1];
  }
  
  for (var pair of form2Data.entries()) {
    jsonData[pair[0]] = pair[1];
  }
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'example.php', true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 处理服务器响应
    }
  };
  xhr.send(JSON.stringify(jsonData));
});

以上代码中，我们首先创建了两个 FormData 对象来收集两个表单的数据。然后，我们创建一个空的 JSON 对象（jsonData），并使用 for...of 循环将 FormData 对象中的数据添加到 JSON 对象中。最后，我们通过 XMLHttpRequest 对象发送 JSON 数据到服务器。

总结

通过使用 FormData 对象或合并表单数据到 JSON 对象中，并使用 Ajax 技术发送给服务器，我们可以轻松传递多个表单的数据。这些方法可以根据具体需求和开发环境选择使用。