jquery - 如何通过 AJAX 将表单数据提交到 Braintree 透明重定向？

Question

这里使用Python和JQuery..

我们之前使用正常的 form.submit(); 提交在 submitHandler验证(JQuery 插件)调用。这已提交到 Braintree 的透明重定向 url，并将重定向设置为我们服务器上的 GET 处理程序。我们进行确认，然后在处理程序中进行另一个重定向。如果提交的数据没有通过 Braintree(比如信用卡不良)，那么我们将一些 html 写入 <div id="error">errormessage</div>在我们的处理程序的响应中，这将被插入到用户的页面中。

问题是，如果我们的处理程序中出现错误，这将产生 500 状态代码，一切都会陷入困境，并且用户的页面会出现不良行为。

如果发生的话，我希望能够处理来 self 们的处理程序的 500 响应。

我想我可以使用 statusCode 来做到这一点jQuery 的 AJAX 属性。

这是我尝试过的(在 submitHandler 中):

var data = $(form).serialize();
$.ajax({
  type: 'POST',
  url: braintree_url,
  data: data,
  statusCode: {
    500: function() {
      alert('broked response yo');
    }
  }
});

然后我故意在处理程序中引发错误以强制执行 500。

但是我的 ajax 提交到 Braintree url 不起作用。 form.submit();不过，工作得很好。

我做错了什么？我是否错误地认为可以像这样通过 AJAX 提交表单并产生相同的结果？

FWIW，我们为 html 表单提供了许多属性，如下所示:

%form#addcard{"action": braintree_url, "method": "post", "autocomplete": "off", "submittype": "secure", "next": braintree_url, "target": "hidden_iframe")}

编辑:

在阅读了更多有关 ajax 的内容后，我意识到我的设置不起作用的可能原因是它正在调用另一个域(Braintree 的)，这违反了同源策略。所以浏览器没有执行它。

来自:http://api.jquery.com/jQuery.ajax/

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

Answer 1

好吧...这是 ajax 的十年前版本，但它对我来说效果非常好:

使用普通表单提交(不调用 $.ajax)，但定位页面中的隐藏 iframe:

<form action="<%= Braintree::TransparentRedirect.url %>" method="POST" target="braintree-result">
...
</form>

<iframe name="braintree-result" id="braintree-target" style="display:none;"></iframe>

然后使用 jQuery Hook iframe 的 load 事件:

$('#braintree-target').on('load', function() {
    var data = $.parseJSON( $(this).contents().text() );
    // Handle response data here
});

然后更改您的 Braintree 回调 URL 以返回 JSON 数据，该数据将在您的 iframe 中呈现，以便您可以在客户端处理它。就是这样!请注意，此方法假设您将 Braintree 重定向回与当前页面具有相同来源的 URL。否则我认为您将无法读取 iframe 内容。