进行 AJAX 调用以从搜索表单结果中获取数据以进行呈现。答案

【问题标题】：Making an AJAX call to get data from a search form result to render.进行 AJAX 调用以从搜索表单结果中获取数据以进行呈现。
【发布时间】：2018-03-01 00:05:58
【问题描述】：

我正在制作一个股票应用程序，基本上用户需要输入一个股票代码，在完成 ajax 调用后，它将返回包含价格、股票代码和名称的实例变量。它也将呈现在搜索栏的正下方。

这是用户界面的图片

这是模型

<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='fa fa-search'></i> Look up a stock
        <% end %>
    </div>
</div>
<% end %>
<% if @stock %>
<div id="stock-lookup-results" class="well results-block">
    <strong>Symbol:</strong> <%= @stock.ticker %>
    <strong>Name:</strong> <%= @stock.name %>
    <strong>Price:</strong> <%= @stock.price %>
</div>
<div id="stock-lookup-errors"></div>
<% end %>
</div>

这里是控制器

class StocksController < ApplicationController

    def search
        if params[:stock]
            @stock = Stock.find_by_ticker(params[:stock])
            @stock ||= Stock.new_from_lookup(params[:stock])
        end
        if @stock
            puts @stock.price
            render partial: 'lookup'
        else
            render status: :not_found, nothing: true
        end
    end

end

当我放置 @stock.price 时，我得到了我想要的信息。然后它继续呈现我想要的页面，但它似乎没有让我得到在 erb 文件中呈现的信息，如果条件表明如果 @stock，呈现必要的信息。

这是让您了解我在说什么的视图。

<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='fa fa-search'></i> Look up a stock
        <% end %>
    </div>
</div>
<% end %>
<% if @stock %>
<div id="stock-lookup-results" class="well results-block">
    <strong>Symbol:</strong> <%= @stock.ticker %>
    <strong>Name:</strong> <%= @stock.name %>
    <strong>Price:</strong> <%= @stock.price %>
</div>
<div id="stock-lookup-errors"></div>
<% end %>
</div>

我还在一个单独的 js 文件中进行 ajax 调用，该文件似乎正在发挥作用。

var init_stock_lookup;

init_stock_lookup = function() {
    $('#stock-lookup-form').on('ajax:success', function(event, data, status) {
         $('#stock-lookup').append(data);
         init_stock_lookup();
    })
}

    $('#stock-lookupform').on('ajax:error',function(event, xhr, status, error){
        $('#stock-lookup-results').replaceWith(' ');
        $('#stock-lookup-errors').replaceWith('Stock was not found.')
    });

$(document).ready( function(){
    init_stock_lookup();
})

def 不是 rails 或 ruby 大师，所以任何帮助将不胜感激！

【问题讨论】：

@Зелёный 我删除了两个答案，因为它们都是错误的。对不起
ajax 代码是干什么用的？你正在使用turbolinks？你为什么用$(document).ready()？

标签： ruby-on-rails ruby ajax ruby-on-rails-4 ruby-on-rails-3.2

【解决方案1】：

当您在控制器操作中调用 render partial: 'lookup' 时，您的情况会发生什么，它会给出代码作为响应，您可以在浏览器的开发人员控制台上检查它，但它不知道如何处理该响应，例如附加它在它前面替换来自 DOM 等的任何 HTML。

试试这个：

在你的控制器动作中写下：

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.js
  end
end

在您的app/views/stocks 中创建一个文件search.js.erb 并在其中写入代码：

<% if @stock %>
  $('body').html("<%= j render partial: 'lookup' %>");
<% end %>

您肯定需要将$('body').html 更改为应用程序中的某个相关选择器。

希望这会有所帮助。

【讨论】：