在 Ajax 请求期间，Gon 变量未从 Rails 控制器传递给 js答案

【问题标题】：Gon variable not passing to js from rails controller during Ajax request在 Ajax 请求期间，Gon 变量未从 Rails 控制器传递给 js
【发布时间】：2017-10-18 17:02:05
【问题描述】：

我正在尝试创建一个大奖投注网站（只是作为一个挑战）。我的控制器中有一个方法可以在用户向底池加钱时更新底池。我在主页上显示底池总数，并想在有人向底池加钱时立即用 Ajax 更新它。我正在使用 gon gem 将变量（例如总罐数）从我的控制器传递到我的 javascript。它在页面重新加载时有效，但在使用 ajax 调用更新方法时无效。

这是我的 PagesController：

def home
  @jackpot = Jackpot.last
  gon.pot = @jackpot.pot
end

JackpotsController：

def update
  @jackpot = Jackpot.find(params[:id])
  if params.has_key?(:amount)
    @jackpot.update(pot: @jackpot.pot + params[:amount].to_f)
    gon.pot = @jackpot.pot
  end
  respond_to do |format| 
    format.js
  end
end

Javascript：（在 url 中 :id 目前是硬编码的）

$("#bet-btn").click(function() {
   $.ajax({
        type: "POST",
        url: "/jackpot/update/21",
        datatype: "json",
        success: function() {
          console.log("Pot size: " + gon.pot);
          updatePot();
        },
        error: function() {
          console.log("error")
        }
    });

});

这会更新锅的甜甜圈进度条

function updatePot() {
  updateDonutChart('#jackpot-donut', gon.pot , true); 
}

下注按钮：（金额也硬编码）

 <%= link_to "Place Bet", update_pot_path(@jackpot, :amount => 
 0.1), method: :post,:remote => true, id: "bet-btn", class: "btn btn-info btn-lg" %>

我对 Rails 非常陌生，尤其是 javascript/ajax，因此我们将不胜感激。谢谢！

【问题讨论】：

console.log("Pot size: " + gon.pot); 通过显示更新后的底池值是否表现得如预期？同样在开发者控制台中你有任何错误吗？
@abax 不，它显示旧的 gon.pot（当前但未更新）。当页面刷新并再次提交 ajax 请求时，它会显示新值。这是（我认为）因为 gon.pot 在 pages#home 操作中设置。
也许可以尝试使用gon.watch,github.com/gazay/gon/wiki/Usage-gon-watch
你对gon的依恋程度如何？您可以简单地返回带有更新数量的 JSON，并在您的 $.ajax 的成功回调中读取它。
@Leito 根本没有附加。尝试它，因为没有其他东西对我有用。如何将 JSON 返回到 ajax 回调？谢谢

标签： javascript jquery ruby-on-rails ruby ajax

【解决方案1】：

在控制器中，只需响应 JSON：

respond_to do |format|
  format.json { render json: { pot: @jackpot.pot } }
end

使用$.ajax 发帖时指定数据类型。注意新数据是 bieng 传给了success函数，所以不是gon.pot，而是data.pot。

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: function(data) {
    console.log('pot', data.pot);
  }
});

【讨论】：

乐于助人！考虑返回整个 @jackpot（或与页面相关的所有内容）并使用更强大的东西构建 json 对象：JBuilder、Active Model Serializers 等。