在 Rails 4 中使用 Ajax 发送表单

Question

我对 Rails 很陌生，我想向服务器发送一个后台请求，然后在不更新整个页面的情况下显示结果。

我查看了这个视频：https://pragmaticstudio.com/blog/2015/3/18/rails-jquery-ajax。在这个视频中，他说有必要创建一个 js 视图。我还查看了这个链接http://www.tutorialspoint.com/ruby-on-rails/rails-and-ajax.htm，但我无法实现我想要的。

基本上，用户填写表格并从控制器接收答案，但表格中引入的值应该在那里。由于整个页面刷新，值被重置。

Routes.rb

 Rails.application.routes.draw do 

      root 'energycalcmod#front_end'
      get 'energycalcmod/front_end'
      post 'energycalcmod/get_values'

    end

energycalcmod_controller.rb

class EnergycalcmodController < ApplicationController

    def front_end

    end

    def get_values

        # Receiving the firsts two entries of the formular
        input1 = params[:user_entry_module1].to_i
        input2 = params[:user_entry_module2].to_i           

        @calc = Calculator.new(input1,input2)

        @energy_calc_results = @calc.energy_calc_module_output          

        respond_to do |format|
            format.html {redirect_to "/energycalcmod/front_end"}
            format.js
        end         

    end   

end

views/energycalcmod/front_end.html.erb

<div id="outer-container" > 
      <div id="input" >
        <h2>Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum perferendis mollitia at consectetur fuga quasi accusantium iste facere blanditiis nobis, aliquam incidunt impedit unde vitae aliquid dolor sapiente. Architecto, natus!</p> 

        <div id="wrapper-form" >
          <%= render "partials/form" %> 

        </div> 
      </div>

       <div id="optimal" >

      </div>
       <div id="independency" >
      </div>
       <div id="save" >

      </div>     
</div>  

<h3 id="test" style="display:none;" > <%=  @energy_calc_results %> </h3>

views/partials/_form.html.erb

<%= form_tag("/energycalcmod/get_values", remote: true) do %>

    <div id="upper-form-wrapper" >
        <div id="upper-form-left" >
            <h5 >Jahreshausverbrauch <a href="#"><i class="fa fa-info-circle" title="Jahreshasuverbrauch"></i></a> </h5>
            <h5 >PV <i class="fa fa-info-circle"></i></h5>
        </div>
        <div id="upper-form-right" >
            <%= text_field_tag "user_entry_module1", params["user_entry_module1"] || "", id: "jahreshausverbrauch", disable: true, class: "first-input-box", size: 1 %><span>kWh</span>
            <div id="slider-jahreshausverbrauch"></div>

            <%= text_field_tag "user_entry_module2", params["user_entry_module2"] || "", id: "pv", disable: true, class: "input-box", size: 1 %><span>kWp</span>
            <div id="slider-pv"></div>
        </div>  
    </div>   

    <%= submit_tag "Berechnen" %> 

<%end%>

views/energycalcmod/get_values.js.erb

$("test").show("<%= j @energy_calc_results %>" );

我在控制台中遇到的错误：

Can't verify CSRF token authenticity
Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken)

问题：我想在不刷新整个页面的情况下发布结果@energy_calc_results。

Answer 1

您应该在布局中添加<%= csrf_meta_tag %> 并呈现结果

$("#test").html("<%= j @energy_calc_results %>" );
$("#test").show();

您没有在 js.erb 文件中使用 id 选择器，如下 -

$("test").show("<%= j @energy_calc_results %>" );

这就是结果未显示在页面中的原因。