如何将JS变量异步发送到Rails

How to asynchronously send JS variable to Rails

本文关键字：Rails 异步 变量 JS      更新时间：2023-09-26

视图中的简单HTML表单。当用户切换表单时，我需要将表单的用户选择值传递到活动记录查询中。（可能不是params，因为那样它就不会异步了？）

在下面的例子中，我需要business_id作为表单的值。rails的新手，所以如果你能提供一些页面内的javascript，我稍后会将其重构到资源中。。。

<select name="clients">
  <option value="1">Tesla</option>
  <option value="4">Chevy</option>
</select>
<table>
  <% @clients.where(month_year:'2015-02',business_id:'NEED VALUE OF HTML FORM HERE').find_each do |client| %>
    <tr>
      <td><%= client.month_year %></td>
      <td><%= client.business_id %></td>
      <td><%= client.bill_charge %></td>
    </tr>
  <% end %>
</table>

为了阐述其他答案，这里有一个（可能）过于简化的模型。

客户端视图 这里需要调用指向分部的render。此分部将包含表数据（因此稍后可以恢复）。您还需要为select语句提供一个类，jquery可以很容易地获取该类来异步获取客户端数据。

# app/views/clients/index.html.erb
<%= select_tag "business", options_from_collection_for_select(Business.all, "id", "name"), class: "car-select" %>
<div class="clients-table">
  <%= render "table_list" %>
</div>

表格部分对于刚从索引视图中剪切出来的表，您需要粘贴到部分中

# app/views/clients/_table_list.html.erb
<table>
  <thead>
    <tr>
      <th>Month year</th>
      <th>Business</th>
      <th>Bill charge</th>
    </tr>
  </thead>
  <tbody>
    <% @clients.each do |client| %>
      <tr>
        <td><%= client.month_year %></td>
        <td><%= client.business.try(:name) %></td>
        <td><%= client.bill_charge %></td>
      </tr>
    <% end %>
  </tbody>
</table>

AJAX脚本这需要关注对选择的更改，并提交客户端数据请求

# app/assets/javascripts/clients.coffee
ready = ->
  $('.car-select').on 'change', ->
    bid = $(this).val()
    $.ajax
      url: '/businesses/' + bid
      dataType: 'script'
    return
  return
$(document).ready(ready)
$(document).on('page:load', ready)
# this is turbolinks-friendly

业务控制器处理请求在ajax请求中，您正在调用一个URL，如"http://yourapp.com/businesses/23"，这确实符合业务控制器的show操作。你想这样做，因为它完全是RESTful的，你不必更改任何路由。但你需要编辑操作，为客户端提供一个实例变量。

# app/controllers/businesses_controller.rb
def show
  @business = Business.find(params[:id])
  @clients = @business.clients (this assumes that you already have a proper has_many / belongs_to relationship between business and client)
  respond_to do |format|
    format.html
    format.js
  end
end

UJS视图最后一块拼图是UJS视图。这是一个只有当js请求类型被发送到特定控制器操作时才会调用的javascript。在这种情况下，显示业务控制器的操作。这将使用新创建的@clients，并用部分数据和新数据替换现有表。

#app/views/businesses/show.js.erb
$(".clients-table").html("<%= escape_javascript(render( '/clients/table_list', client: @clients)) %>");

如果你仍然有问题，或者想做更复杂的事情，你应该去研究一下UJS模板和回调。

  • 把你的结果表分成一个分部
  • 在select的onchange事件上激发ajax请求
  • 根据作为请求变量传递的select的值呈现表（`@clients'）
相关文章：