在提交表单之前根据下拉列表的值变化动态填充表单字段

Question

我正在处理 RoR 项目的订单，想用数据库中现有的客户信息填充买家信息。所以我需要从下拉列表（select 字段）中 select 一个客户名称，然后使用 select 填写买家信息字段（名称、phone、电子邮件、地址等）编辑客户信息。

因此我的问题是，这样做的首选做法是什么？我的想法类似于使用 GET 方法调用 Ajax 来获取 json 格式数据，然后使用 jQuery 来填写或更改买家信息字段。 "rails way"实现这个功能正确吗？

顺便说一句，整个订单是 simple_form，买家信息字段都在 simple_fields_for 部分。如果这有帮助。

Answer 1

如果您想根据用户的选择填充表单，那么您绝对需要使用某种 javascript 解决方案。要么进行 AJAX 调用，要么如果它可行（即你没有太多客户以这种方式序列化并且这不是安全或性能问题）你可以将客户数据预加载为 json 进入你的前端 javascript 像这样（在你看来）：

<script>
   var customerData = JSON.parse(<%= @customers.to_json %>);
</script>

然后让 selected 用户的数据根据该变量中的数据填充表单。

这将带来更快、更流畅的用户体验，并且在后端更容易，而不必在用户每次更改 select 框的值时都进行 AJAX 调用.

Answer 2

"standard" 方法是通过 ajax（只需向您的 users#show 操作发送 JSON 请求，它应该 return您请求的用户数据 -- 我稍后会写）。

从你的问题来看，你似乎应该做点别的。

fill buyer info with existing customer info in database

这是不好的做法 -- 它会导致您的数据库中出现重复条目。

这样做的方法是利用 Rails 中的 associations 让你与关联 customer新买家信息：

#app/models/order.rb
class Order < ActiveRecord::Base
   belongs_to :customer #-> requires "customer_id" in "orders" table
end

#app/models/customer.rb
class Customer < ActiveRecord::Base
   has_many :orders
end

这将在您的 order 上创建一个关联的 customer 对象：@order.customer 它将 return 您的其他数据库 table 中的数据。

您必须确保为新的 Order 对象填充 customer_id 参数：

#app/controllers/orders_controller.rb
class OrdersController < ApplicationController
   def new
      @customers = Customer.all
      @order = Order.new
   end

   def create
      @order = Order.new order_params
      @order.save
   end

   private

   def order_params
      params.require(:order).permit(:customer_id, :etc, :etc)
   end
end

#app/views/orders/new.html.erb
<%= form_for @order do |f| %>
   <%= f.collection_select :customer_id, @customers, :id, :name %>
   <%= f.submit %>
<% end %>

JS

您也可以使用上述代码来满足您的要求。

您基本上需要向您的 customers#show 操作发送 Ajax (JSON) 请求，这将 return 特定 customer 的相关字段] 给你的 JS:

#app/controllers/customers_controller.rb
class CustomersController < ApplicationController
   respond_to :json, :html, only: :show

   def show
      @customer = Customer.find params[:id]
      respond_with @customer
   end
end

#app/assets/javascripts/application.js
$(document).on("change", "select#customer_id", function(e){
   $.ajax({
      url: "customers",
      dataType: "json",
      data: { id: $(this).val() },
      success: function(data){
         // Output returned data in form
      }
   });
});

在提交表单之前根据下拉列表的值变化动态填充表单字段

Dynamically fill form fields according to value change of a dropdown before submitting form

ajax

ruby-on-rails

simple-form