Ajax 向两个 URL 发送 POST答案

【问题标题】：Ajax send POST to two URLsAjax 向两个 URL 发送 POST
【发布时间】：2017-10-18 20:34:29
【问题描述】：

在我的网站上，我想将 POST 数据发送到两个不同的 URL，并稍微修改每个 URL 的数据。一个是infusion soft，另一个是我另一个网站上的API。

注意 #1：我将用示例文本替换我的个人 API 的 URL。

注意 #2： 是否必须设置内容类型，或者在发送表单数据之前是否缺少其他标题/信息？如果是这样，为什么这一切都可以从桌面完美运行？这段代码过去都在 jQuery 中，但效果不佳，所以我尝试在 Vanilla JS 中重写整个代码，只是为了摆脱依赖问题的想法。

注意 #3： No 'Access-Control-Allow-Origin' header is present on the requested resource.
^ 这与 Infusion Soft 和我的个人 API 有关。我假设它甚至没有在 Infusion Soft 上设置，这不是问题，特别是考虑到一切都可以在桌面上完美运行的事实。

注意 #4： 每个和所有选择器都匹配一个元素。没有错别字，这在桌面运行时 100% 有效
Windows 10 Home
Chrome Version 61.0.3163.100 (Official Build) (64-bit)

注意 #5： 表单上的操作转到 Infusion Soft。我阻止默认情况发生，以便我可以处理数据，然后将其发送到我们的数据库。完成后，我再次处理数据，然后让 Infusion Soft 的 action 属性运行 - 您可以在代码中看到所有内容。

我的代码如下：

<script>

var form = document.getElementById('RequestADemo');
document.getElementById('submitButton').addEventListener('click', processData);

function processData(e){

  e.preventDefault();

  var phone = document.getElementById('inf_field_Phone1').value;

  var formData = new FormData(form);
  formData.append('action', 'insertLead');
  formData.append('inf_field_Phone', phone);

  var oReq = new XMLHttpRequest();
  oReq.open('POST', 'http://example.com/api.php', true);
  oReq.send(formData);

  var fullName = document.getElementById('inf_field_FirstName').value;
  var fullNameSplitted = fullName.split(' ');

  var firstName = fullNameSplitted[0];

  if (fullNameSplitted.length > 1) {
    var lastName = fullNameSplitted[1];
  }

  var formData2 = new FormData(form);
  formData2.delete('inf_field_FirstName');
  formData2.append('inf_field_FirstName', firstName);
  formData2.append('inf_field_LastName', lastName);

  var oReq2 = new XMLHttpRequest();
  oReq2.open('POST', form.getAttribute('action'), true);
  oReq2.send(formData2);

  form.reset();

  alert('Thanks! We will contact you shortly. Check your email for a confirmation.');

}

</script>

此代码在桌面上完美运行，并提交给我的个人 API 和 Infusion Soft。在我们的 API 中，我们负责名字和姓氏的拆分，并将它们插入到数据库中的单独字段中。但是，对于 Infusion Soft，我们需要在发送数据之前执行此操作，因为我们无法控制其 API。这一切都在桌面上按计划进行。

在我的 iPhone7 的 Safari 中，此代码按计划插入到我的个人数据库中，但甚至没有进入 Infusion Soft。我用console.log();测试了一些东西，发现

var FormData2 = new FormData(form);

是移动设备上出现问题的地方。

这条线之前的一切都在移动设备上运行完美。

有什么想法吗？我真的很感激！

**更新：**

这是我发送到 Infusion Soft 的第二个请求的新变量和代码：

  var email = document.getElementById('inf_field_Email').value;
  var company = document.getElementById('inf_field_Company').value;
  var phone = document.getElementById('inf_field_Phone1').value;

  var fullName = document.getElementById('inf_field_FirstName').value;
  var fullNameSplitted = fullName.split(' ');

  var firstName = fullNameSplitted[0];

  if (fullNameSplitted.length > 1) {
    var lastName = fullNameSplitted[1];
  }

  var formData2 = new FormData();
  formData2.append('inf_field_FirstName', firstName);
  formData2.append('inf_field_LastName', lastName);
  formData2.append('inf_field_Email', email);
  formData2.append('inf_field_Company', company);
  formData2.append('inf_field_Phone1', phone);

  var oReq2 = new XMLHttpRequest();
  oReq2.open('POST', form.getAttribute('action'), true);
  oReq2.send(formData2);

但是，这不适用于台式机或移动设备！ :( 然而，最终的警报确认即将到来。

【问题讨论】：

根据developer.mozilla.org/en-US/docs/Web/API/…delete 在 safari 上不受支持。
该表还说此代码不适用于 IE 或 Edge。您需要创建一个空的 FormData 并使用 .append() 从表单和变量中填充它，而不是从表单创建 FormData 然后替换其中的条目。
@GabyakaG.Petrioli 谢谢！
@Barmar 所以我可以写 var FormData2 = new FormData();并且不包括括号中的表格正确吗？
是的，就是这样创建一个空的FormData，然后你可以使用.append()添加你要发送的所有参数。

标签： javascript ajax forms api infusionsoft

【解决方案1】：

已解决

正如 cmets 中提到的@Barmar，我必须创建空的 FormData 并手动附加所有值。我这样做了，起初它不起作用。我发现我正在附加我想要发送到 Infusion Soft 的所有值，但解决方案是发送 ALL 隐藏字段Infusion Soft 为您提供无样式的 HTML 表单及其值。

我只需要添加这些表单中的其他 3 个隐藏字段：

formData2.append('inf_form_xid', xid);
formData2.append('inf_form_name', isFormName);
formData2.append('infusionsoft_version', isVersion);

请注意，我已经在此代码块之前将变量设置为它们的值。 Infusion Soft 必须不接受数据，除非它接收到这些值，这是完全合理的。

【讨论】：