0

在 Rails 4.1.8 中

我正在处理付款表格（Braintree 付款），我希望它可以通过 Ajax 工作。我不能使用标准的 Braintree 表单设置，因为它不提供 onSuccess 和 onError 方法。但我可以使用一个特殊的 javascript 函数来查看字段，与 Braintree 服务器对话并返回一个随机数，然后以表单的形式发送该随机数。所以...

我创建了一个表单并设置了 remote: true。这允许 rails_ujs 接管并将表单 ajax 到我的服务器。但在此之前，我必须给 Braintree 打电话并得到回复。他们提供的 javascript 函数执行异步调用。因此，我无法挂钩 Rails 'ajax:before' 回调，因为 Braintree javascript 调用在 'ajax:before' 传递到主 rails_ujs 后返回一个值，主 rails_ujs 将表单内容发送到服务器，因此我得到一个服务器端的空白字段。

Braintree 提供的 js 函数确实有正常的回调，所以我可以挂钩成功回调并触发表单提交。所以我尝试挂钩提交按钮上的点击事件，禁用默认设置，调用 Braintree，然后当我得到成功的响应时，我调用

$('#myForm').submit()

它确实发送了数据，但它是一个普通的非 xhr POST。深入挖掘，我发现 rails_ujs 的行为不像是挂接到 form.submit() 事件，而是挂接到提交按钮 click() 事件。因此，通过捕获该事件、阻止默认行为、调用 Braintree 然后在表单上触发 submit() 事件，我将完全删除 Rails ajax 内容。

关键问题是如何触发 Rails ajax 表单进行远程发送，而不点击表单内的提交按钮？

作为一种解决方法，我可以进行手动编码的 $.ajax 调用，或者在表单上放置一个隐藏的提交按钮和另一个执行 Braintree 调用的可见按钮，然后触发对隐藏提交按钮的单击。这至少会为我完成所有带有 csrf 令牌的 Rails 表单提交。但我想知道为什么我不能调用 form.submit()

4

1 回答 1

3

为您的表单删除 remote: true 并换成使用本机 javascript 来提交您的表单。

braintree.setup(
  braintree_token,
  'dropin', {
  container: 'dropin',
  paymentMethodNonceReceived: function (event, nonce) {
    $('.braintree-checkout').append("<input type='hidden' name='payment_method_nonce' value='"+ nonce +"'></input>");
    $.ajax({
      url: braintree_charge_path,
      type: 'post',
      data: $('.braintree-checkout').serialize(),
      context: $('.braintree-checkout'),
      beforeSend: function(evt, xhr, settings){
        // Stuff to do before braintree submits, e.g. loading screen
      },
      complete: function(evt, xhr, status){
        // Stuff that has to be done regardless of success or error 
      },
      error: function(evt, xhr, status, error){
        // Your error messages
      }
    });
  }
});

这样您就可以完全控制表单流程

于 2015-02-11T11:14:07.720 回答