使用JavaScript URL模拟JSONP响应

Question

我在WP网站上使用Gravity Forms.我的表单使用Pardot 表单处理程序通过ajax POST到Pardot.我遇到了Pardot处理表单6x的问题,没有其他错误.研究表明,这是因为Pardot不支持CORS或JSONP,因此在使用ajax提交时会陷入循环.当表单处理程序的成功URL设置为引用URL时,它正在处理提交但从未"完成".它在放弃之前尝试6次,处理提交的数据并每次发送新的潜在客户通知电子邮件.

Pardot 帮助文档建议以下解决方案:

通过将表单处理程序的成功和错误URL分别设置为执行成功和错误回调的JavaScript URL,可以模拟JSONP响应.

我不完全确定这意味着什么或如何处理它.我已经做了一些stackoverflowing和谷歌搜索,但我似乎无法绕过如何做到这一点.有人可以帮助澄清这个概念或指出我正确的方向吗？

谢谢!

Answer 1

编辑：因此，在与此斗争几天后，我将发布我的最终解决方案，这可能会帮助其他人尝试使用 JSONP 与 Pardot 进行通信。这是一个三部分的问题：

1. 向 Pardot 表单处理程序发送 JSONP 请求
2. 将 Pardot 表单处理程序成功/错误重定向到您自己的服务器
3. 从您的服务器返回 JSONP

从处理程序向 Pardot 发送 JSONP 请求

要将表单数据发送到表单处理程序，您需要对字段名称和值进行 URI 编码。

（使用 JQuery 的示例。指定 dataType 时，ajax() 添加了 '?callback=' ：'jsonp'）：

var data = { 'field1' = 'value1', 'field' = 'value2' };
var uriEncodedParams = $.param(data);
var targetUrl = <Pardot Form Handler URL> + '?' + uriEncodedParams;

$.ajax({
    url: targetUrl,
    dataType: 'jsonp',
    jsonpCallback: 'callback'
});

window.callback = function (data) {...}

将 Pardot 从处理程序成功/错误重定向到您自己的服务器

见@nickjag 的回答：

将 Success Location 和 Error Location 设置为后端的端点。

由于 pardot 不会转发您传入的任何 GET 参数，因此您必须在 ie 回调函数名称上使用一些默认值（因此指定 jsonpCallback 并且在我的请求中没有成功）。

从您的服务器返回 JSONP

我在使用时遇到了控制台错误 ( Uncaught SyntaxError: Unexpected token :)问题： return "{ 'result' : 'success' }"因为它是一个 JSON 对象并且 JSONP 需要一个带有 JavaScript 的文件。所以返回的格式应该是：return "callback({ 'result' : 'success' })"

再次 Pardot 不转发 GET 参数，从 JQuery 生成的回调函数名称没有传播，我无法返回正确的 JavaScript 代码。如果没有提供，默认使用函数名称“回调”。

从 .NET MVC 后端返回 JSONP 的指南

Answer 2

Pardot 建议在您自己的服务器上创建 2 个返回简单 JSON 响应的静态 URL。

例如：

1. mysite.com/pardot-success

返回：{"result":"success"}

2. mysite.com/pardot-error

返回：{"result":"error"}

然后，您将使用这两个 URL 作为 Pardot 表单处理程序设置的成功和错误重定向 URL。

然后，可以使用 JSONP 向 Pardot 表单处理程序发出 AJAX 请求，该处理程序将包装并返回来自这些 URL 之一的 JSON 响应（取决于结果）。

您的 AJAX 响应数据将包括您的 JSON 结果（成功或错误）。