ruby-on-rails - 将 form_tag 提交为 ajax 会导致 UnknownFormat 错误或将 js 呈现为 html

Question

我有一个 Stripe 表单，当我尝试使用 Ajax 提交它时，我一直遇到错误。

完整的代码在下面，但我一直试图调整的那条线就是这form_tag条线。有了这个：

<%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %>

我收到此错误：

ActionController::UnknownFormat in UsersController#buy
ActionController::UnknownFormat

respond_to do |format|  <= HIGHLIGHTED
  format.js
end

但是当我指定js格式时：

<%= form_tag(buy_path(@product.id, format: :js), id:'payment-form', authenticity_token: true, remote: true) do %>

js 文件只是呈现为纯 html。如，浏览器只打印内容：

$("html").hide();

---

这是我的完整代码。当我删除内联 javascript 时，buy.js.erb会正常呈现，因此似乎添加了一些 javascript 内容，导致浏览器无法将请求作为 ajax 处理。

购买.html.erb

<!-- The form. Fields are inserted into #card-element with JS -->
<%= form_tag(buy_path(@product.id), id:'payment-form', authenticity_token: true, remote: true) do %>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  <button id="submit-card">Submit Payment</button>
  <div id="cancel-bid">Cancel</div>
<% end %>

<script type="text/javascript">

  var stripe = Stripe('<%= key %>');
  var elements = stripe.elements();

  // Create an instance of the card Element.
  var card = elements.create('card', {style: style});

  // Add an instance of the card Element into the `card-element` <div>.
  card.mount('#card-element');

  card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });

  // Create a token or display an error when the form is submitted.
  var form = document.getElementById('payment-form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the customer that there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
      }
    });
  });

  function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit the form
    form.submit();
  }
</script>

users_controller/rb

def buy
  respond_to do |format|
    format.js
  end
end

购买.js.erb

$("html").hide();

标签： ruby-on-railsajaxformsstripe-payments