web-dev-qa-db-ja.com

JavaScriptURLを使用してJSONP応答をシミュレートする

WPサイトでGravityFormsを使用しています。フォームPOST ajax経由で Pardot Pardotを使用 formハンドラー 。Pardotがフォーム6xを処理し、他のエラーは発生しないという問題が発生しています。調査によると、PardotはCORSまたはJSONPをサポートしていないため、ajaxを使用して送信するとループが発生します。送信を処理していますが、フォームハンドラーの成功URLが参照URLとして設定されている場合、「終了」することはありません。6回試行してから、送信されたデータを処理し、毎回新しい見込み顧客通知メールを送信します。

Pardot help docs 次の解決策を提案します。

フォームハンドラーの成功URLとエラーURLを、それぞれ成功コールバックとエラーコールバックを実行するJavaScript URLに設定することで、JSONP応答をシミュレートできます。

これが何を意味するのか、どのようにアプローチするのか完全にはわかりません。スタックオーバーフローとグーグルを実行しましたが、その方法に頭を悩ませているようには見えません。誰かがこの概念を明確にするのを手伝ったり、私を正しい方向に向けたりできますか？

ありがとう！

javascriptajaxjsonppardot
10
alison

Pardotが提案しているのは、単純なJSON応答を返す2つの静的URLを独自のサーバーに作成することです。

したがって、たとえば：

  1. mysite.com/pardot-success

戻り値： {"result":"success"}

  1. mysite.com/pardot-error

戻り値： {"result":"error"}

次に、これら2つのURLを、Pardotフォームハンドラー設定の成功およびエラーリダイレクトURLとして使用します。

次に、JSONPを使用してPardotフォームハンドラーにAJAXリクエストを送信できます。これにより、これらのURLの1つからJSON応答がラップされて返されます（結果によって異なります）。

AJAX応答データにはJSON結果（成功またはエラー）が含まれます。

3
nickjag

編集：それで、これと戦った数日後、JSONPを使用してPardotと通信しようとしている他の人を助けるかもしれない私の最終的な解決策を投稿します。これは3つの部分からなる問題です。

  1. JSONPリクエストをPardotフォームハンドラーに送信します
  2. Pardotフォームハンドラの成功/エラーを自分のサーバーにリダイレクトする
  3. サーバーからJSONPを返す

JSONPリクエストをハンドラーからPardotに送信します

フォームデータをフォームハンドラーに送信するには、フィールド名と値をURIエンコードする必要があります。

（JQueryを使用した例。 '？callback ='は、dataTypeを指定するときにajax（）によって追加されます： '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コードを返すことができませんでした。何も指定されていない場合、デフォルトで関数名「callback」が使用されます。

。NET MVCバックエンドからJSONPを返すためのガイド

5
Anders Steinrud

ここでのすべての回答は、このソリューションを開始するのに本当に役立ちましたが、私の要件は、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" })'));
    }
}

次に、このREST WebサービスをSalesforceSITEを介して次のようなURLで公開します。

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

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

また、PardotフォームハンドラUIで、[成功場所]フィールドと[エラー場所]フィールドをそれぞれこれらのURLに設定します。

これは、この質問に対する他の回答と非常に似ていますが、完全にSalesforceのアプローチから採用されています。 OPの技術スタックとは多少関係がないかもしれませんが、将来的に答えを探している人には役立つはずです。

0
Jon Duelfer