如何使用 ajax 和额外字段提交

Question

假设我有一个如下的简单表格

<%= form_for(@category) do |f| %>
  <% if @category.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@category.errors.count, "error") %> prohibited this category from being saved:</h2>

      <ul>
      <% @category.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :enabled %><br>
    <%= f.check_box :enabled %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

我想使用 ajax 请求提交此表单。我的表格 ID 是new_category。所以我尝试了这样的事情

<script type="text/javascript">
  $("#new_category").click(function () {  
    $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: '/categories',
      dataType: "json",
      success: function (result) {
        return false
      },
      error: function () {
        window.alert("Something went wrong! Please try again");
      }
    });
  });
</script>

这不是提交我的表单。我想我错过了一些东西。另外，在提交表单之前，我想将名称字段内容替换为固定字符串“这是一个示例字符串”。并且需要发送一些其他的固定数据，比如"user_id" => current_user.id, "user_name" => current_user.name

user_id 和 user_name 这两个字段不在类别表中。那么我必须在控制器中将其列入白名单吗？如果是这样，那我该怎么做？

Answer 1

首先，我在您的表单上找不到 ID #new_category，rails 会自动添加它，即特定于框架吗？其次也是最重要的是，您没有在 ajax 设置中发送数据参数。

根据其他人的建议，您需要将数据作为 ajax 请求的一部分发送。所以你可以添加数据：

到 ajax 请求。试试看：

$("#new_category").serialize()

所以你的请求变成了：

<script type="text/javascript">  $("#new_category").click(function () {  
$.ajax({
  type: "POST",
  contentType: "application/json; charset=utf-8",
  url: '/categories',
  dataType: "json",
  data: $("#new_category").serialize() 
  success: function (result) {
    return false
  },
  error: function () {
    window.alert("Something went wrong! Please try again");
  }
});

});

Answer 2

在表单上添加类或 id 并提交按钮，例如：-

<%= form_for(@category), id: "category_form" do |f| %>
    <%= f.submit "Submit", class: "add_category" %>
<% end %>

如果您使用了 devise 并且 current_user 存在，那么您可以发送带有表单值的额外参数：-

<script type="text/javascript">
    $(document).on('click', '.add_category', function(event) {
        event.preventDefault();
        var user_id = "<%= current_user.id %>"
        var username = "<%= current_user.username %>"
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '/categories',
            dataType: "json",
            data: $("#category_form").serialze + "&user_id="+user_id+"&username="+username
        });
    });
</script>