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

Question

在这里使用 Python 和 JQuery..

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

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

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

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

这是我尝试过的（在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/

由于浏览器安全限制，大多数“Ajax”请求都受同源策略的约束；请求无法从不同的域、子域或协议中成功检索数据。

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 钩住 iframe 的 load 事件：

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

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