如何在rails应用程序中提交表单数据而不重新加载页面

Question

project_director 表有一个属性状态，它与project 具有 one_to_one 关联。
每次我的页面重新加载时，我都会在提交表单时使用 project_director 表单渲染项目。我从在线资源中尝试了 ajax，但我的页面仍然重新加载。这是我尝试过的。

index.html.erb

<%= form_for ProjectDirector.new do |f| %>
<td>
   <table class="approval-table">
      <tr>
         <td>
            <ul>
               <div>
                  <div class="wrapper-class">
                     <%= f.radio_button :status, true  %>
                     <%= f.label :approve %>
                     <br>
                     <%= f.radio_button :status, false  %>
                     <%= f.label :reject %>
                  </div>
                  <%=f.hidden_field :project_site_id, value: project_site.id%>
               </div>
            </ul>
         </td>
         <td>
            <%= f.hidden_field :user_id, value: current_user.id %>
            <%= f.submit 'Submit', :class => 'button primary small' %>
         </td>
      </tr>
   </table>
   <script>
      $(function(){
          $("#new_project_director").on("submit", function(event) {
              event.preventDefault();
      
              var formData = {
                  'status': $('input[name=project_director[status]]').val() //for get status
              };
              console.log(formData);
      
              $.ajax({
                  url: "/project_directors",
                  type: "post",
                  data: formData,
                  success: function(d) {
                      alert(d);
                  }
              });
          });
      })
      
   </script>
  </td>

project_directors_controller.rb

  def create
    @project_director =  ProjectDirector.new(remark_params)
      if @project_director.save
        redirect_to directors_index_path(anchor: 'panel2')
    end
  end

def remark_params
  params.require(:project_director).permit(:status, :projec_id, :user_id)
end

Answer 1

Rails 在这里为您提供了很多帮助。我能够在没有大量额外的 javascript 并且没有深入研究实际表单字段的情况下完成这项工作，因为 Rails 已经知道这些东西是如何形成的以及如何 它应该一起工作。

注意：我有一个名为 Thing 的模型，它有一个 accepted 布尔属性。这应该对应于您的ProjectDirector（大致）。

在表格中

<%= form_for(thing, remote: true) do |f| %>
  <%= f.check_box :accepted %>
  <%= f.submit 'Submit', :class => 'button primary small' %>
<% end %>

在控制器中

# things_controller.rb
  def create
    @thing = Thing.new(thing_params)


    if @thing.save
      if request.xhr?
        render json: { success: true }
      else
        redirect_to @thing, notice: "Thing was successfully created."
      end
    else
      render :new
    end
  end

如果我创建一个新的Thing，页面不会刷新，它会采用我的布尔值。

您会注意到没有真正的附加 javascript。 Rails UJS 只需在表单中添加 remote: true 即可为我处理。

这不会处理您尝试执行的可能重定向，即在网站上加载新标签。要在成功提交后触发操作， 您可以使用类似的方法添加成功和失败的侦听器

 $('#my-form-id').on('ajax:success', function(event){
    const [data, status, xhr] = event.detail
    alert(xhr.responseText)
    // or 
    alert(data.success)
 }).on('ajax:error',function(event){
    alert("Something went wrong")
 });

查看this stackoverflow post 或 阅读 Ruby on Rails 指南here