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);
    });
  });
});

users / 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/