使用 AJAX 在 Rails API 上创建/保存用户

Question

我有一个简单的应用程序，它在创建新用户时通过 API 后端提供 JSON。我正在尝试将 AJAX 添加到请求中，以便在添加新用户时不会重新加载页面。我真的是 AJAX/API 的新手，真的不知道需要做什么。

这是我的用户 API 控制器：

class Api::UsersController < Api::BaseController
protect_from_forgery with: :null_session

def create
@user = User.create!(user_params)
respond_to do |format|
  format.html { redirect_to users_list_path, notice: 'User was successfully created.' }
  format.json { render json: @index }
  format.js
end
end



private

  def user_params
    params.require(:user).permit(:name)
  end

  def query_params
    params.permit(:name)
  end

  end

这是我的索引视图（应该用 ajax 调用刷新）：

<% content_for :title do %>Users<% end %>
<h3>Here is the user list.  Please click on one to see messages.</h3>
<br/>
<% User.all.each do |user| %>
  <p><%= link_to String(user.id) + '. ' + user.name, messages_list_path(user_id: user.id) %></p>
<% end %>
<br/>
<%= form_tag("/api/users.json", method: "post") do %>
  <%= label_tag(:add_user, "Add User:") %>
  <%= text_field_tag("user[name]") %>
  <%= submit_tag("Add") %>
<% end %>

我遇到的问题是，当我添加一个新用户时，它会将我直接带到显示 JSON 数据的http://localhost:3000/api/users.json。我需要该应用程序基本上停留在表单所在的同一页面上，并且只需使用 AJAX 进行更新。

我对在 Rails 和 AJAX 中构建 API 非常陌生，所以任何帮助都会很棒！

Answer 1

将 remote: true 添加到您的 form_tag 以提交 ajax 调用。 见DOCS

form_tag("/api/users.json", method: "post", remote: true)

Answer 2

问题是表单在提交时会自动重定向您。您可以放入一个 jQuery 事件侦听器来防止这种情况，然后使用 ajax 调用创建新用户，如下所示：

    $('form').on('submit', submitForm.bind(this, event));

    var submitForm = function (event) () {
        event.preventDefault();
        var user = $('form').serialize();

       $.ajax({
           url: "/api/users",
           method: "POST",
           data: user,
           dataType: "json",
           success: function(data){
           this.handleSuccess(data);
           }.bind(this)
        });
      };

不确定这是否正是您要寻找的，但希望对您有所帮助！