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/