javascript - Rails 3 form_tag 与 'remote: true' 以 HTML 形式转到 Controller (在平衡支付回调之后？)

Question

在我的主 form_for 中，我有一个带有 form_tag 的模式，允许用户向其帐户添加新信用卡。此 form_tag 具有 remote: true ，以便请求可以作为 Ajax 发送到 CardsController，其中成功会呈现一个关闭模式的模板并添加将新卡信息添加到主表单上的现有卡列表中。

问题是请求以 HTML 形式发送到 Controller 。 SO 上有很多关于此问题的帖子，但没有一个提供适合我的答案。我正在使用 Google Chrome 进行调试，在“网络”选项卡中我看到了以下内容:

我不明白 1) 为什么“类型”是“text/html”，因为我已经设置了 remote: true 或 2) 为什么状态是 302，我认为这是用于重定向。

可能存在的一个问题是 Balanced Payments balanced.js 正在处理此表单，以获取抄送信息并生成一个 balanced_card_id，然后将一组参数传递给 Controller ​​。我猜这就是 302 的含义，但我不确定，因为我继承了这个系统，并且不能 100% 确定平衡支付回调是如何工作的。无论如何，我的 form_tag 的路径是期望 xhr 请求的 Controller 。如果我在 CardsController#create 操作顶部使用 binding.pry，我会看到以下内容:

balanced.js 回调请求的完整 URL 为 ttps://api.balanced payments.com/jsonp/cards?callback 后跟一长串字符。它的请求方法为GET，状态代码为200。响应如下所示:

{"status":201,"header":{"X-Balanced-Guru":"OHM64f3830e606b11e4ab4502a1fe53e539","Content-Type":"application\/json","x-balanced-host":"bapi-live-prod-7nf6hx-10-3-5-34","x-balanced-software-build":"1.8.39","Content-Length":154,"access-control-allow-origin":"*","access-control-allow-headers":"Content-Type","x-balanced-revision":"1.1","access-control-allow-methods":"POST, OPTIONS","X-Midlr-Version":"2","x-newrelic-app-data":"PxQFWFNXCQYTVVhWAwQDVUYdFhE1AwE2QgNWEVlbQFtcCxYxSBVbDQoZVA4IF0pcXAgEEBhSVhQAQhhQEAMCFlVAFEIIFBQCHVUIUQJUB1tdAwBTUVYLCgBSU04XCAFfSBEUAFVWB1oJW15UClsMC1JVWEMdQVUDCEVSPA=="},"body":"{\n  \"cards\": [\n    {\n      \"href\": \"\/cards\/CC34wrO6NsSYBoVyPM6mTtcC\",\n      \"id\": \"CC34wrO6NsSYBoVyPM6mTtcC\",\n      \"links\": {}\n    }\n  ],\n  \"links\": {}\n}"}
);

Controller 使用该散列中的 id 将卡与 current_user 关联起来。不知何故，这个响应变成了我的 Controller 接收到的实际 params 哈希值，我可以通过使用 binding.pry 并在控制台中输入 params 来查看它。我明白了:

{"utf8"=>"✓",
 "authenticity_token"=>"HW9/OFAdC373D5L7/yzqKMT2Its2uV31ZxlCe/vQtCU=",
 "balanced_card_id"=>"CC34wrO6NsSYBoVyPM6mTtcC",
 "action"=>"create",
 "controller"=>"money/cards"}

所以我仍然不明白为什么对 Controller 的原始请求是以 HTML 形式接收的。

表格如下:

  = form_tag(money_cards_path, id: 'new-card', remote: true) do
    .modal-header
      %button{ type: "button", class: "close", data: { dismiss: "modal" }}
        %span{ aria: { hidden: "true" }} ×
        %span.sr-only Close
      %h4.modal-title New Credit Card
    .modal-body
      #errors
      %fieldset
        %p Enter your new credit card information below.
        .row
          .col-sm-8
            = render 'money/cards/form_fields'
    .modal-footer
      = submit_tag "Add Credit Card", class: 'btn btn-success', id: 'new-card-submit', autocomplete: "off"
      .pull-right.cancel
        =link_to 'Cancel', '#', data: { dismiss: "modal" }

这是 Controller :

class Money::CardsController < ApplicationController
  before_filter :authenticate_user!

  def create
    @balanced_marketplace = ENV["BALANCED_MARKETPLACE"] #only if it fails and needs to render again

    respond_to do |format|
      if @card = current_user.add_card(params[:balanced_card_id])
        format.html { redirect_to money_root_path, notice: 'Your credit card has been successfully added.' }
        format.js
      else
        format.html { render action: :new, alert: 'Failed to save credit card to your account. Please contact Sweeps for support.' }
        format.js
      end
    end
  end
end

现在，由于请求格式为 HTML，我被重定向到 money_root_path。

Answer 1

确保您的 application.js 中有这两行:

//= require vendor/jquery (your jQuery path)
//= require jquery_ujs

并在您的 gemfile 中添加此行(就在 gem 'rails', '3.x.x' 之后):

gem 'jquery-rails'

之后你应该执行:

run bundle install

并重新启动您的服务器。这对我有用!当我有一个带有 :remote => true 的元素时，它是由 Ajax 发送的。