如何在 Rails 视图中使用 AJAX

Posted

技术标签:

【中文标题】如何在 Rails 视图中使用 AJAX【英文标题】:How to use AJAX in rails Views 【发布时间】:2016-03-10 15:38:45 【问题描述】:

我有一个articles 循环,每个循环都有一个 comment

目标是使用 JS 动态/异步呈现 comment

我的问题是:

如何调用/激活我在下面定义的逻辑?

#welcome/index.haml
- @articles.each do |article|
  = article.title
  - article.comments.each do |comment|
    %comment-content :id => "comment-#comment.id" 

#welcome/comment.js.erb
// var
var comment = "#comment-<%= params[:comment_id] %>" 

// render
$(comment).html("<%=j render 'comment_content' %>")

#welcome/_comment_content.haml
= comment.content

更新:

在尝试解决它时,我想我应该添加如下内容:

class WelcomeController < ApplicationController 
    def index
    end

    def comment
        respond_to do |format|
            format.js  render 'comment'  
    end 
end

【问题讨论】:

你好,我现在在回复你,很全,一步一步,稍等 谢谢!非常感谢我的朋友。 请考虑选择我的答案作为接受,我花了一些时间... 【参考方案1】:

您可以使用 AJAX,假设您将在 readypage:change 上显示 cmets 以避免 Turbolinks 问题

注意:我会使用 erb,因为我对 haml 感到不舒服。

第 1 步:定义路线

为您的 AJAX 事件创建一个路由,在这种情况下,我们将创建一个 GET。

#This route will call the action get_one_comment of your articles_controller
get 'articles/get_one_comment'

第 2 步:定义控制器操作

在您的articles_controller.rb 中创建get_one_comment 操作,因此当您的ajax 调用该操作时,它会检索正确的信息,从您的Ajax 操作中您将发送文章的ID,因此它也可以作为params[:article_id] 使用确保该操作与您的控制器回调兼容,有时控制器中的 before_action 可能会导致问题:

#articles_controller
def get_one_comment
  @article = Article.find params[:article_id]
  @comment = @article.comments.last
  resond_to do |format|
    format.js
  end
end

你注意到respond_to 块了吗?以及您可以看到此控制器操作将以 js.erb 格式或 js.haml 在您的情况下响应。

第 3 步:修复标记

我们的 Ajax 请求中的想法是遍历我们的文章并将文章 ID 发送到控制器操作,我们还需要设置某种 CSS 类或 ID,我们的响应脚本将在其中放置评论。

#welcome/index.html.erb
<% @articles.each do |article| %>
<div id="article-<%= article.id %>" class="article-block" data-article-id="<%= article.id %>"
<%= article.title %>
<div class="comment-section">
</div>
</div>

第 4 步:添加 Ajax

现在我们需要创建一个异步加载 cmets 的 Ajax 请求,我将使用 CoffeeScript,在您的 assets/javascripts 文件夹中选择一个文件,假设我们将选择 articles.js.coffee,所以当页面加载时,我们将循环浏览我们所有的文章并发送一个 Ajax 请求:

#articles.js.coffee
loadOneComment = ->
    $('.article-block').each ->
        $article_block = $(@)
        $.ajax '/articles/get_one_comment',
        type: 'GET'
        dataType: 'script'
        data: 
            article_id: $article_block.data('article-id')
        
        error: (jqXHR, textStatus, errorThrown) ->
            console.log("AJAX Error: #textStatus")
        success: (data, textStatus, jqXHR) ->
            console.log("Worked OK!")

$(document).ready loadOneComment
$(document).on 'page:change', loadOneComment

第 5 步:使用响应脚本呈现评论。

创建一个响应脚本,在这种情况下,正如我们在控制器操作中设置的那样,我们将在format.js 中回答,然后我们需要创建一个get_one_comment.js.erb 文件,其中将包含我们的响应脚本。在此脚本中,我们只需将评论适当地放置在页面中即可。

#get_one_comment.js.erb
$('#article-<%= @article.id %> .comment-section').append('j render(@comment)');

上面将为您页面中的每个文章 div 呈现部分 comments/_comment.html.erb

如果它不起作用,请检查你的 JavaScript 控制台,我没有测试,所以我可能有打字错误,或者 rails 控制台,但基本上我已经给你了实现它的步骤和正确的方法,你可以自定义您的 AJAX,例如在不同的事件中发送请求,例如滚动、悬停、单击等...

【讨论】:

你好,请看这个问题***.com/questions/35957409/…

以上是关于如何在 Rails 视图中使用 AJAX的主要内容,如果未能解决你的问题,请参考以下文章

如何将延迟的ajax数据获取到rails视图

如何中断 Rails 中的 AJAX 请求?

如何在 Rails 中执行 AJAX-y 条件显示/隐藏表单字段?

如何使用 AJAX 在索引视图上喜欢对象?

如何使用rails cucumber,rspec,capybara在视图(dhtml)中测试动态部分?

如何在 rails3.1 中使用 ajax?