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

Question

这里使用的是Python和JQuery。

之前我们在验证的 submitHandler 中使用普通的 form.submit(); 提交表单。这会把数据提交到Braintree的透明重定向网址，重定向的目标是我们服务器上的一个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。

但是我提交到Braintree网址的AJAX请求没有成功。而 form.submit(); 是正常工作的。

我到底哪里做错了？我是不是错以为可以通过AJAX提交表单并得到相同的结果？

顺便提一下，我们给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回调网址改成返回JSON数据，这样数据就会在你的iframe中显示，你可以在客户端处理它。就这样！需要注意的是，这种方法假设你让braintree重定向回一个和当前页面同源的网址。否则，我觉得你可能无法读取iframe的内容。