Question

阅读了一些关于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

Answer 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.

Answer 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>

带Rails的简单Ajax请求＆amp;自举

2 个答案: