Ajax将POST发送到两个URL

在我的网站上，我想将POST数据发送到两个不同的URL并略微修改每个URL的数据。一个是软输注，另一个是另一个我的网站上的API。Ajax将POST发送到两个URL

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

注意＃2：是否有必要设置内容类型，或者在发送表单数据之前是否存在其他标题/信息？如果是这样，为什么这些都会从桌面上完美运行？这段代码过去一直都在jQuery中，但运行得并不顺利，所以我试图重写Vanilla JS中的所有东西，只是为了解决依赖关系问题。

注3：No 'Access-Control-Allow-Origin' header is present on the requested resource.
^这涉及到输液软和我个人的API两者。我假设它在Infusion Soft上甚至没有设置它，这不是问题，特别是考虑到在桌面上一切正常工作的事实。

注＃4：每个和所有选择符都匹配一个元素。有没有错别字，并再次，这部作品以100％的台式机上运行
Windows 10 Home
Chrome Version 61.0.3163.100 (Official Build) (64-bit)

注5：在表格上的行动去输液软。我停止了默认的发生，所以我可以使用这些数据，然后将它发送到我们的数据库。之后，我再次处理数据，然后让动作属性为Infusion Soft运行 - 您可以在代码中看到。

我的代码如下：

<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和输液软。在我们的API中，我们负责名字和姓氏的拆分，并将它们插入到数据库中的单独字段中。但是，对于Infusion Soft，我们需要在发送数据之前这样做，因为我们无法控制其API。这是所有按计划在桌面上工作。

在Safari上的我的iPhone7中，此代码按照计划插入到我的个人数据库中，但甚至没有将其输入到Infusion Soft。我测试了一些事情console.log();，发现

var FormData2 = new FormData(form);

是哪里的东西在移动断行。

此行之前的所有内容都在移动设备上运行完美。

任何想法？我真的很感激它！

**更新：**

这里是我的新的变量和代码的第二请求发送到输液软：

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);

但是，这是行不通的电脑或行动！ :( 但是最终警报确认正在通过。

来源

2017-10-18 Zach Broniszewski

根据https://developer.mozilla.org/en-US/docs/Web/API/FormData#Browser_compatibility，safari不支持'delete'。 –

该表格还表示此代码在IE或Edge上不起作用。您不需要从表单创建FormData，然后替换其中的条目，您需要创建一个空的FormData，并使用'.append（）'从表单和变量中填充它。 – Barmar

@ GabyakaG.Petrioli谢谢！ –

解决

正如在评论中提到@Barmar，我不得不创建空FORMDATA和手动添加的所有值。我这样做了，起初它不工作。我想到的是我追加了所有值想要发送到Infusion Soft，但解决方案是发送所有隐藏字段Infusion Soft为您提供了无格式的HTML表单及其值。

我不得不让这些追加其为形式3个其他隐藏字段：

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

请注意，我已经设定的变量在此之前的代码块的值。 Infusion Soft必须不接受数据，除非它接收到这些值，这是非常有意义的。

来源

2017-10-18 22:52:10

Ajax将POST发送到两个URL

回答

相关问题