【问题标题】:Simulate a JSONP response with JavaScript URLs使用 JavaScript URL 模拟 JSONP 响应
【发布时间】:2018-04-13 08:03:12
【问题描述】:

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

Pardot help docs 建议以下解决方案:

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

我不完全确定这意味着什么或如何处理它。我已经完成了一些堆栈溢出和谷歌搜索,但我似乎无法理解如何去做。有人可以帮助澄清这个概念或指出正确的方向吗?

谢谢!

【问题讨论】:

    标签: javascript ajax jsonp pardot


    【解决方案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 的回答:

    将成功位置和错误位置设置为后端的端点。

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

    从您的服务器返回 JSONP

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

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

    Guide for returning JSONP from .NET MVC backend

    【讨论】:

    • 谢谢——这也非常有帮助!我已经尝试过@nickjag 和你的方法,它们都有效!
    【解决方案2】:

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

    例如:

    1. mysite.com/pardot-success

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

    1. mysite.com/pardot-error

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

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

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

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

    【讨论】:

    • 非常感谢。这绝对让我朝着正确的方向前进。
    • 所以我必须在后端创建两个文件?
    【解决方案3】:

    这里的所有答案确实帮助我继续使用这个解决方案,但我的要求是让一切都只能通过 Salesforce 运行。因此,对于仅使用 Salesforce 的后端架构来寻找答案的任何人,我希望这会有所帮助。我必须稍微改变我的 Ajax 调用的结构才能使其正常工作:

    var data = { 'username': username };
    var uriEncodedParams = $.param(data);
    var targetUrl = 'https://my.pardot.url' + '?' + uriEncodedParams;
    $.ajax({
        url: targetUrl,
        type: 'GET',
        dataType: 'jsonp',
        crossDomain: true
    });
    
    window.callback = function(data) {
        performMoreActions(data);
    }
    

    我的服务器采用 Apex(Salesforce 的编程语言)构建,如下所示:

    @RestResource(urlMapping='/pardot/success/*')
    global without sharing class Pardot_SuccessProxy {
    
        @HttpGet
        global static void Pardot_SuccessProxy() {
            RestContext.response.addHeader('Content-Type', 'application/json');
            RestContext.response.responseBody = (Blob.valueOf('callback({ "result" : "success" })'));
        }
    }
    

    然后我通过 Salesforce SITE 公开此 REST Web 服务,网址如下:

    https://my-domain.server-domain.force.com/services/apexrest/pardot/success

    https://my-domain.server-domain.force.com/services/apexrest/pardot/error

    在 Pardot 表单处理程序 UI 中,将 Success Location 和 Error Location 字段分别设置为这些 URL。

    这与该问题的其他答案非常相似,但完全采用 Salesforce 方法。它可能与 OPs 技术堆栈有些无关,但它应该对未来寻找答案的人有所帮助。

    【讨论】:

      猜你喜欢
      • 2015-05-31
      • 2016-01-07
      • 2015-03-21
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-18
      • 1970-01-01
      • 2018-03-19
      相关资源
      最近更新 更多