使用 Ajax in Rails 4 发送表单

Question

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

我看了这个视频：https://pragmaticstudio.com/blog/2015/3/18/rails-jquery-ajax. In this video he says it is necessary to create a js view.I also took a look into this link 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)

问题：我想post结果@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 %>" );

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

使用 Ajax in Rails 4 发送表单

Using Ajax in Rails 4 to send a form

ajax

ruby-on-rails

ruby-on-rails-3

ruby-on-rails-4