Javascript AJAX Rails-请求明显丢失-没有UI结果

我之前有一些请求，提供的解决方案似乎已经解决了问题（因为我没有从浏览器控制台收到错误），但是我的应用程序在UI中没有显示任何内容。 以下是服务器处理请求的方式：

Started GET "/search_stocks?utf8=%E2%9C%93&stock=GOOG&button=" for 127.0.0.1 at 2017-06-19 12:50:13 +0200
Processing by StocksController#search as JS
  Parameters: {"utf8"=>"✓", "stock"=>"GOOG", "button"=>""}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Stock Load (0.4ms)  SELECT  "stocks".* FROM "stocks" WHERE "stocks"."ticker" = ? ORDER BY "stocks"."id" ASC LIMIT ?  [["ticker", "GOOG"], ["LIMIT", 1]]
  Rendered stocks/_lookup.html.erb (1084.6ms) [cache miss]
Completed 200 OK in 3002ms (Views: 1114.2ms | ActiveRecord: 0.8ms)

这是我的用户界面（部分）：

基于此，如果我对控制器中的“render partial:'lookup'”进行注释，请取消对“render json:@stock”的注释，并直接通过浏览器处理请求：我得到了我要查找的信息。这意味着gem和请求工作正常。 一旦我试图通过AJAX处理请求，我什么也得不到。。。有人有办法吗？我感觉我对JavaScript的处理很差，或者我可能缺少了一块宝石或其他东西。 无论如何，这里是我的gem文件供参考：

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.1'
gem 'devise'
gem 'twitter-bootstrap-rails'
gem 'devise-bootstrap-views'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'jquery-rails'
gem 'jquery-turbolinks', '~> 2.1'
gem 'stock_quote'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  gem 'sqlite3'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

源代码'https://rubygems.org'
git_源（：github）do | repo_名称|
repo_name=“#{repo_name}/#{repo_name}”除非repo_name.include？（“/”）
"https://github.com/#{repo_name}.git“
结束
#捆绑边缘Rails：gem'Rails'，github'Rails/Rails'
gem'rails'，“~>5.1.1”
宝石“设计”
gem'twitter引导程序rails'
gem“设计引导视图”
gem‘链轮轨道’，：require=>‘链轮/导轨’
gem'jqueryrails'
gem'jquery turbolinks'，“~>2.1”
创业板“股票报价”
#使用Puma作为应用程序服务器
宝石“彪马”，“大于3.7”
#将SCS用于样式表
gem'sass-rails'，“~>5.0”
#使用Uglifier作为JavaScript资产的压缩器
gem'uglifier'，'>=1.3.0'
#看https://github.com/rails/execjs#readme 获取更多受支持的运行时
#宝石“therubyracer”，平台：：ruby
#将CoffeeScript用于.coffee资产和视图
gem“咖啡轨”，“~>4.2”
#Turbolinks使web应用程序的导航速度更快。阅读更多：https://github.com/turbolinks/turbolinks
gem“涡轮链接”，“大于5”
#轻松构建JSON API。阅读更多：https://github.com/rails/jbuilder
gem'jbuilder'，“~>2.5”
#使用Redis适配器在生产中运行操作电缆
#gem'redis'，“~>3.0”
#使用ActiveModel具有\u安全\u密码
#gem'bcrypt'，“~>3.1.7”
#使用Capistrano进行部署
#gem“capistrano rails”，集团：：开发
小组：开发，：测试
gem'sqlite3'
#在代码中的任意位置调用“byebug”以停止执行并获得调试器控制台
gem'byebug'，平台：[：mri，：mingw，：x64_mingw]
#增加了对Capybara系统测试和selenium驱动程序的支持
宝石“水豚”，“大于2.13”
gem“selenium webdriver”
结束
小组：发展怎么办
#在异常页面上或通过使用代码中的任意位置访问IRB控制台。
gem“web控制台”，“>=3.3.0”
gem'listen'，'>=3.0.5'，'<3.2'
#Spring通过让应用程序在后台运行来加速开发。阅读更多：https://github.com/rails/spring
宝石“春天”
gem‘SpringWatcherListen’，“~>2.0.0”
结束
#Windows不包括zoneinfo文件，因此捆绑tzinfo数据
gem'tzinfo data'，平台：[:mingw，:mswin，:x64_mingw，:jruby]
小组：生产部
宝石“pg”
gem“rails_12factor”
结束

---

这里有一个指向我的repo的链接：

您使用的是

remote:true

，您应该使用

respond\u to

方法来处理ajax。这是一个示例，您可以一步一步地执行：

删除

app/assets/javascripts/stocks.js

在

app/controllers/stocks\u controller.rb中编辑操作
search

def search
  if params[:stock]
    @stock = Stock.find_by_ticker(params[:stock])
    @stock ||= Stock.new_from_lookup(params[:stock])
  end
  respond_to do |format|
    format.html
    format.js
  end
end

编辑

app/views/stocks/_lookup.html.erb

<div id="stock-lookup">
  <h3>Search for stocks</h3>
  <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %>
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg' %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %>
          <i class="glyphicon glyphicon-search"></i> Look up a stock
        <% end %>
      </div>
    </div>
    <% end %>
  <div id='stock-lookup-results' class="results-block"></div>
</div>

<% if stock.present? %>
  <strong>Symbol:</strong> <%= stock.ticker %>
  <strong>Name:</strong> <%= stock.name %>
  <strong>Price:</strong> <%= stock.price %>
<% else %>
  <i>Stock not found</i>
<% end %>

$("#stock-lookup-results").html("<%= j render 'stock', {stock: @stock} %>");

创建

app/views/stocks/search.js.erb

<div id="stock-lookup">
  <h3>Search for stocks</h3>
  <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %>
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg' %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %>
          <i class="glyphicon glyphicon-search"></i> Look up a stock
        <% end %>
      </div>
    </div>
    <% end %>
  <div id='stock-lookup-results' class="results-block"></div>
</div>

<% if stock.present? %>
  <strong>Symbol:</strong> <%= stock.ticker %>
  <strong>Name:</strong> <%= stock.name %>
  <strong>Price:</strong> <%= stock.price %>
<% else %>
  <i>Stock not found</i>
<% end %>

$("#stock-lookup-results").html("<%= j render 'stock', {stock: @stock} %>");

$（“#股票查询结果”）.html（“”）；

---

完成

救命啊！非常感谢我的好先生的帮助和时间！！我只是想知道，在这种情况下为什么要使用respond to？我的意思是，我理解你告诉应用程序根据客户的请求使用html或js，但它不总是js吗？那么我不确定我是否得到了部分的力学。如果我没弄错的话，你没有提到任何地方的股票…如果你有一个很好的和推荐的图托或课程来学习更多，如果你能分享我将不胜感激斐@Ardzii！首先，如果只想渲染js，只需删除

stocks\u controller.rb

中的一行

format.html

。其次，我在

app/views/stocks/search.js.erb

中呈现

\u stock.html.erb

。谢谢你！很抱歉问了这么多问题。正如你现在猜到的，我对这个很陌生，但我真的很喜欢。。。再次感谢你的帮助！

$("#stock-lookup-results").html("<%= j render 'stock', {stock: @stock} %>");