首页 > 解决方案 > 如何使用 GET 请求作为 XHR 处理 form_with

问题描述

我正在开发 Rails 6 应用程序,并希望根据使用 XHR 选择的下拉值更新页面视图。下拉必须使用 GET 方法因为我正在调用索引操作。

我正在使用form_withwhich 默认使用remote: true. 我没有使用local: true.

我试过onchange: "Rails.fire(this.form, 'submit')"- 这确实发送 XHR 请求并接收响应但不更新视图。

我试过onchange: "this.form.submit();"了——这会重新加载整个页面,而不是使用 XHR。

来自 app/views/users/index.html.erb 的代码

<%= form_with url: station_users_path(station_id: Current.user.home_station), method: :get do |form| %>
          <%= form.select :user_status, options_for_select( { "Active users" => "unlocked", "Inactive users" => "locked"}, @user_status ), {}, { :onchange => "Rails.fire(this.form, 'submit')" } %>
        <% end %>

来自 app/controllers/users_controller.rb 的代码

  def index
    @user_status = params[:user_status] || "unlocked"
    @users = @station.users.send(@user_status) || []
    @user_status == "unlocked" ? seperate_managers_from_users : @managers = []
  end

标签: ruby-on-rails

解决方案


在 onchange 中只需编写一个get_station_users()函数。在里面你可以使用ajax调用。

在表格中

<%= form_with url: station_users_path(station_id: Current.user.home_station), id: “form_id”, method: :get do |form| %>
  <%= form.select :user_status, options_for_select( { "Active users" => "unlocked", "Inactive users" => "locked"}, @user_status ), {}, { :onchange => "get_station_users()" } %>
<% end %>

添加脚本

function get_station_users(){
$.ajax({
    type: "GET",
    url: "/station_users",
    data: {  $('#form_id').serialize(), },
    dataType: 'script'
});
}

您的回复将是JS.所以您可以使用index.js.erb


推荐阅读