使用 Rails 和 Bootstrap 的简单 Ajax 请求答案

【问题标题】：Simple Ajax Request with Rails & Bootstrap使用 Rails 和 Bootstrap 的简单 Ajax 请求
【发布时间】：2016-12-07 17:52:17
【问题描述】：

浏览了一些关于 Ajax-Rails 的教程。为了查看我是否正确理解了这些概念，我尝试了自己的单独 Ajax 请求。

我遇到了一个障碍，因为当我执行 /forum_threads.json 时我只返回一个空的 []，我认为问题出在我的控制器中的任一索引下，如下所示。

def index
@forum_threads = ForumThread.all
@forum_threads = ForumThread.where(id: :ForumThread_id)
end

或者在我这样做的超级简单的 json.jbuilder 中：

json.array! @forum_threads do |forum_thread|
json.url forum_thread_path(forum_thread)
end

forum_thread.js.coffee

class Forum_Threads
constructor: ->
    @forum_threads = $("[data-behavior='forum_threads']")
setup: ->
    $.ajax(
        url:"/forum_threads.json"
        dataType: "JSON"
        method: "GET"
        success: @handleSuccess
    )
handleSuccess: (data) =>
    items = $.map data, (forum_thread) ->
        "<p class='item' href='#{forum_thread.url}'></p>"
    $("[data-behavior='forum_thread-items']").html(items)
jQuery ->
new Forum_Threads

Index.html.erb

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#trending">Trending</a></li>
<li><a data-toggle="tab" href="#westoros">Westoros</a></li>
<li><a data-toggle="tab" href="#essos">Essos</a></li>
<li><a data-toggle="tab" href="#wall">Beyond the Wall</a></li>
</ul>
<div class="tab-content">
<div id="trending" class="tab-pane fade in active" data-behavior="forum_threads">
<h3>Trending</h3>
  <p class="item" data-behavior="forum_thread-items"></p>
</div>
<div id="westoros" class="tab-pane fade">
  <h3>Westeros</h3>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="essos" class="tab-pane fade">
  <h3>Essos</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="wall" class="tab-pane fade">
  <h3>Beyond the Wall</h3>
  <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

如果您能帮助我，将非常有帮助。非常感谢你们:)

Github 到代码：https://github.com/OmarZV/NotificationAjax

【问题讨论】：

标签： jquery ruby-on-rails ajax twitter-bootstrap

【解决方案1】：

@forum_threads = ForumThread.all #hare you are loading all ForumThread records 
@forum_threads = ForumThread.where(id: :ForumThread_id) # ForumThread has no integer key?

所以尝试这样做：

ForumThread.where(id: [1, 2]) or something like this.

【讨论】：

非常感谢您的回复，我能够获得 /forum_threads.json 以显示 1 和 2 的结果。但是在我的 HTML 页面上，即使我认为我没有显示结果ve 正确标记了数据行为。我也将相关的 HTML 放在了评论中。

Trending
您也可以运行“rails 控制台”并尝试在那里执行您的代码。控制台会告诉你什么方法返回

【解决方案2】：

因此，在专业开发人员的帮助下，我能够解决我的代码存在的问题。我在这里提供了正确的帮助，以防其他人遇到类似问题。问题有 4 个：Turbolinks、我的 forum_threads 控制器文件、index.json.jbuilder 和我的 coffescript 文件。希望它可以帮助其他人学习。

Index.json.jbuilder

json.array! @forum_threads do |forum_thread|
json.title forum_thread.title
json.url forum_thread_path(forum_thread)
end

forum_threads_controller.rb

class ForumThreadsController < ApplicationController
before_action :authenticate_user!, except: [:index, :show]
before_action :set_forum_thread, only: [:show, :edit, :update, :destroy]
def index
@forum_threads = ForumThread.all
respond_to do |format|
  format.html
  format.json
end
  end

forum_threads.js.coffee

class ForumThreads
constructor: ->
    @forum_threads = $("[data-behavior='forum_threads']")
    @setup()


setup: ->
    $.ajax(
        url:"/forum_threads.json"
        dataType: "JSON"
        method: "GET"
        success: @handleSuccess
    )


handleSuccess: (data) =>
    console.log data
    items = $.map data, (forum_thread) ->
        "<p><a class='item' href='#{forum_thread.url}'>#{forum_thread.title}</a></p>"
    $("[data-behavior='forum_thread-items']").html(items)
$(document).on 'turbolinks:load', ->
new ForumThreads

Index.html.erb

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#trending">Trending</a></li>
<li><a data-toggle="tab" href="#westoros">Westoros</a></li>
<li><a data-toggle="tab" href="#essos">Essos</a></li>
<li><a data-toggle="tab" href="#wall">Beyond the Wall</a></li>
</ul>
  <div class="tab-content">
<div id="trending" class="tab-pane fade in active" data-behavior="forum_threads">
  <h3>Trending</h3>   
  <p class="item" data-behavior="forum_thread-items"></p>
</div>
<div id="westoros" class="tab-pane fade">
  <h3>Westeros</h3>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="essos" class="tab-pane fade">
  <h3>Essos</h3>
  <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="wall" class="tab-pane fade">
  <h3>Beyond the Wall</h3>
  <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>

【讨论】：