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

Create/Save Users on Rails API using AJAX

本文关键字：创建 保存 用户 API AJAX Rails 使用      更新时间：2023-09-26

我有一个简单的应用程序，在创建新用户时通过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 %>

我遇到的问题是，当我添加一个新用户，它带我直接到http://localhost:3000/api/users.json显示JSON数据。我需要的应用程序基本上停留在同一页的形式是，只是简单地更新与AJAX。

我真的是新的构建API的rails以及AJAX，所以任何帮助将是伟大的!

将remote: true添加到form_tag以提交ajax调用。看到文档

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

问题是表单在提交时自动重定向您。你可以加入一个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)
        });
      };

不确定这是否正是你要找的，但希望它能帮助!

相关文章：