javascript - 使用ajax将字符串传递给 Controller ​​中的对象

Question

我是网络编程新手。所以我在网上搜索了一段时间，想自己解决这个问题，但似乎没有人有类似的问题。

在我的程序中，我正在获取用户输入，其中包含通过我的app/views/booths/new.html.erb中的文本区域创建的新展位的管理员。文件，如下图。

app/views/booths/new.html.erb:

<% provide(:title, 'Create New Booth') %>
<h1>Create New Booth</h1>

<% javascript_include_tag "booths" %>

<div>
  <div>
    <%= form_for(@booth) do |f| %>
      <%= f.label :booth_name, "Name of the new Booth" %>
      <%= f.text_field :booth_name %>

      <%= f.label :booth_description, "Describe your new Booth" %>
      <%= f.text_field :booth_description %>

      <%= f.label :important_notice, "Any important notices?" %>
      <%= f.text_field :important_notice %>

      <span><br>Admins for this Booth?<br> </span>
      <textarea id="create_booth_admins_textarea" rows="30" cols="50"> </textarea>

      <%= f.submit "Create a new booth", :id => "booth_create_submit"%>
    <% end %>
  </div>
</div>

app/assets/javascripts/booths.js 摘录:

admins = $("textarea#create_booth_admins_textarea").val();

$('#booth_create_submit').click(function() {
    $.ajax({
        url: "/booths_create",
        data: {  "booth_admin_emails" : admins},
        type: "post",
        cache: false,
        success: function () {
            console.log("ajax successful");
            alert("ajax successful");
        },
        error: fucntion() {
            console.log("ajax error");
            alert("ajax error")
        }
    }); 
});

应用程序/ Controller /booths_controller.rb:

def new
        @booth = Booth.new
        @other_members = []
        @booth_admins = []
    end

    def create
        temp_hash = booth_params
        @booth = Booth.new(temp_hash.except(:booth_admin_emails))
        @booth.admin_id = current_user.id               #fill in the Booth table

        @booth_admins = temp_hash[:booth_admin_emails]

        booth_admins = []

        if @booth.save
            #fill in join table
            BoothUser.create(:user_id => current_user.id, :booth_id => @booth.id, :is_admin => true) #add current user

            if !@booth_admins.nil?
                booth_admins = @booth_admins.split(",")
            end

            if !booth_admins.empty?
                booth_admins.each do |email|
                    BoothUser.create(:user_id => User.where("email=?", email).id, :booth_id => @booth.id, :is_admin => true)
                end
            end

            # just a flash to tell user that new booth was created
            name = @booth.booth_name
            flash[:success] = "New Booth #{name} created!"
            redirect_to '/booths'
        else
          render('show')
        end
    end

    private
    def booth_params
        params.require(:booth).permit(:booth_name, :booth_description, :important_notice, :booth_admin_emails)
    end

用户和展位为has_many through关联，其中连接表称为 BoothUser ，其中包含 booth_id, user_id, is_admin 的信息，其中 id 是特定用户和展位在各自表中的索引，is_admin是一个 bool 值，检查用户是否是展位的管理员(具有编辑展位设置的权限)。

出现问题是因为在我的展位表中，我只声明了展位的创建者，并且不跟踪该展位的给定管理员，但我试图通过查找该展位的连接表来找到该展位的这些管理员booth_id匹配该展位的索引和 is_admin是真的。

我一直在尝试传递 create_booth_admins_textarea 上输入的内容至:booth_admin_emails在 Controller 中，但到目前为止还没有运气，因为没有任何内容传递到 :booth_admin_emails 。我猜这是因为 :booth_admin_emails不是 Booth 的属性或User或BoothUser型号。

我在网上发现的是使用强参数(？)传递参数的方法，以允许使用 form_for 或 ajax 的模型属性。但似乎没有人将不是模型属性的输入传递给 Controller ​​。

所以，我想问有没有办法做到这一点，如果有的话，我该怎么做？还是只是不允许？

Answer 1

您应该能够像这样创建它:

BoothUser.create(user: current_user, booth: @booth, is_admin: true) #add current user
booth_admins.each do |email|
  admin = User.find_by(email: email)
  BoothUser.create(user: admin, booth: @booth, is_admin: true)
end

在 HTML 中，您需要像这样创建文本区域:

<textarea id="create_booth_admins_textarea" name="booth[booth_admin_emails]" rows="30" cols="50"> </textarea>

那么您根本不需要 JavaScript。

...但是，如果您希望通过 AJAX 提交整个表单，那么除了上面的 HTML 更改之外，还可以在 JavaScript 中执行以下操作:

$('#booth_create_submit').click(function(e) {
    e.preventDefault(); # keeps the HTML form from submitting.
    var the_form = $(this.form);
    $.ajax({
        url: the_form.attr('action'),
        data: the_form.serialize(),
        type: "post",
        cache: false,
        success: function () {
            console.log("ajax successful");
            alert("ajax successful");
        },
        error: fucntion() {
            console.log("ajax error");
            alert("ajax error")
        }
    }); 
});