Question

我想我在使用JQuery和我的Rails练习时遇到了麻烦，我打算从＆＃39; form_tag＆＃39;中获取两个参数。然后在我的控制器中将一个计算结果呈现在＆＃39;＆＃39;在一个视图中，我在网络视图（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/

Rails 5不呈现JQuery结果

2 个答案: