0

在 Ruby on Rails 应用程序中，我希望能够将用户的用户名放在输入文本框中，按下“添加”按钮，然后让它们显示在下方及其详细信息。然后，如果我想使用另一个按钮，我可以简单地将它们从列表中删除。

如何连接 Javascript 和 Rails 数据库以专门使用这些按钮完成这样的任务？虽然 Javascript 不是我的强项，但我更困惑于如何使用 Javascript 提取和修改 Rails 数据库。作为参考，我也在使用 MongoDB。

解决这个问题的最佳方法是什么？

流行::用户界面添加/删除

这是我用来“发布”到服务器端点“admin/popular/users.json”的 jQuery 和 AJAX 代码，但我不确定如何让 Rails 使用我的在数据库中创建新用户流行::用户模型。

$(document).ready(function() {
    $('.add-to-popular-users-button').click(function(event){
        event.preventDefault();
        var addToPopularUsersBtn = $(this);
        var userToBeAdded = $('input[name=popular_user]').val();
        var data = { 'popular_user': {'username': userToBeAdded, 'category': 'popular'} };
        var url = "/admin/popular/users.json";
        $.ajax({
            url: url,
            data: data,
            dataType: 'json',
            type: 'POST',
            success: function(e) {
                alert('Great success!');
            }

        });
    });
});

这是我的 Popular::User 模型：

class Popular::User
  include Mongoid::Document
  include Mongoid::Timestamps

  POPULAR = 'popular'

  field :category, default: POPULAR
  index :user_id

  belongs_to :user

  validates_presence_of :user_id
  validates_uniqueness_of :user_id

  def self.popular
      user_ids = self.where( :category => POPULAR ).map(&:id)

      User.where(:_id.in => user_ids)
  end
4

2 回答 2

1

我不熟悉 Rails 框架，但您可以使用 ajax 来完成。您可以向控制器方法发送一个 ajax 发布请求，该方法将创建一个用户，创建一个表行（或重新创建表），并返回表中的 html 位置。

一个简单的例子是：

$.ajax({
 type:'post',
 data:{} //user data,
 dataType: 'json', //or any other
 url: 'page_or_method',  //page or method that will return html
 success: function (data) {
     $('div#userTable').html(data); //in case data contains the table
 }
});

阅读有关 $.ajax 方法 (jQuery) 的信息，或者如果您不想使用 jQuery，可以使用 XMLHttpRequest。

于 2013-04-30T20:58:55.507 回答
0

所以，我能够通过一些测试来解决这个问题。但是，基本上，您可以使用 AJAX/jQuery 或使用 Rails 固有的 RESTful 架构来执行此操作，即 HTTP 动词，如调用 :delete，并将其与特定的 UI 按钮相关联。

使用 AJAX 应该认识到的一个重要想法是，无论您使用“POST”或“DELETE”动词或您有什么发送到正确的服务器端点的任何数据，都会被适当的控制器操作接收。换句话说，如果我通过 'POST' 将数据发送到 '/popular/users.json' 端点以创建某些东西，那么该def create方法之后将能够操作数据。然后，您可以将数据分配给控制器操作中的 ivar，以便在与控制器操作对应的 UI 视图中进行解释和操作。

于 2013-07-04T16:58:50.797 回答