Rails 5 不呈现 JQuery 结果

Question

我想我在 JQuery 和我的 Rails 实践中搞砸了，我打算从“form_tag”中获取两个参数，然后在视图中的“”中呈现我的控制器中生成的计算结果，我得到了结果网络视图（Chrome 开发者工具），但 .这是相关的代码： 路线：

get '/calculator', to: 'users#bmi_calc'

users_controller.rb:

def bmi_calc
  bmi_table = {
  "Very severely underweight"             => { from: 0.0, to: 15.0 },
  "Severely underweight"                  => { from: 15.1, to: 16.0 },
  "Underweight"                           => { from: 16.1, to: 18.5 },
  "Normal (healthy weight)"               => { from: 18.51, to: 25.0 },
  "Overweight"                            => { from: 25.1, to: 30.0 },
  "Obese class I (moderately obese)"      => { from: 30.1, to: 35.0 },
  "Obese class II (severely obese)"       => { from: 35.1, to: 40.0 },
  "Obese class III (very severely obese)" => { from: 40.1, to: 60.0 },
  "Pure fat factor"                       => { from: 60.1, to: 100.0}
  }
  weight = params[:mass].to_f
  height = params[:height].to_f
  if weight > 0 && height > 0
    resultado = ''
    @bmi = weight / height ** 2
    bmi_table.each do |advice, range|
      if (@bmi > range[:from]) && (@bmi < range[:to])
        resultado = advice
      end
    end
    respond_to do |format|
      format.json { render json: {resultado: resultado} }
    end
  else
    redirect_to current_user
  end
end

users.js.erb：

$(document).ready( function(){
  $("#calculator-img").click( function(){
    $.getJSON('/calculator', function(data) {
      var res = data.resultado;
      $("#bmi-result").html(res);
    });
  });
});

用户/show.html.erb：

<div class="row">
  <aside class="col-md-4">
    <section class="user_info">
      <h1><%= @user.name %></h1>
    </section>
    <section class="bmi_form">
      <%= render 'bmi_form' %>
    </section>

    <div id="bmi-result">

    </div>
  </aside>
  <div class="col-md-6">
    <section class="mid_section">
      <p>Some text</p>
      <h2>BMI standard table</h2>
      <%= image_tag "BMItable.png", alt: "BMI stardard table" %>
    </section>
  </div>
</div>

_bmi_form.html.erb：

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left" do %>
  <%= label_tag :mass, "Your mass (weight) in Kg" %>
  <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %>

  <%= label_tag :height, "Your height in meters" %>
  <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %>

  <%= image_submit_tag("BMI.gif", id: "calculator-img") %>
<% end %>

最后，这是我在 Chrome 开发者工具中得到的：

请帮助我了解我做错了什么。谢谢 （这是我打算解决的挑战：https://gist.github.com/JonaMX/d29a754ae625664b0cf7 最后我交付了，但我不得不用结果渲染一个新页面......一点也不漂亮）

Answer 1

您需要将处理函数绑定到表单的 ajax 请求。 首先在表单中添加一个 id：

<%= form_tag calculator_path, method: "get", remote: true, class: "navbar-left", id: "bmi-form" do %>
  <%= label_tag :mass, "Your mass (weight) in Kg" %>
  <%= number_field_tag :mass, params[:mass], step: 0.01, class: "form-control" %>

  <%= label_tag :height, "Your height in meters" %>
  <%= number_field_tag :height, params[:height], step: 0.01, class: "form-control" %>

  <%= image_submit_tag("BMI.gif", id: "calculator-img") %>
<% end %>

然后将您的 javascript 更改为以下内容：

$(document).ready( function(){
  $("#bmi-form").on( "ajax:success", function(evt, data, status, xhr){
    var res = data.resultado;
    $("#bmi-result").html(res);
  });
});

欲了解更多信息，请参阅http://guides.rubyonrails.org/working_with_javascript_in_rails.html

Answer 2

这段代码可以试一次

$(document).ready( function(){
      $("#calculator-img").click( function(){
          $.getJSON('/calculator', function(data) {
              var res = $.parseJSON(data);
              $("#bmi-result").html(res.resultado);
          });
      });
   });

欲了解更多信息，请参阅https://boxoverflow.com/get-json-jquery-ajax/