RoR 4 form_tag AJAX 请求问题

Question

所以我正在尝试在我的 form_tag 中执行 AJAX 请求。基本上，用户可以输入歌曲名称或艺术家姓名，我想简单地 post 将他们搜索的内容放入播放列表（这里非常简单）

这些是我的文件：

我的表格

 <%= form_tag({:action => 'capp'}, method:'GET', class: 'ui form', remote: true , id: 'song_form') do %>
      <div class="one field">
        <div class="field" style="width: 100%">
           <%= text_field_tag :query %>
        </div>
      </div>
      <%= submit_tag("Search Song" , class: 'ui large green button') %>
  <% end %>

我要将查询输入的位置

<div id="query"></div>

我的 'app' 具有该操作的控制器

class AppController < ApplicationController
  respond_to :html, :js

  def create
    passcode = params[:passcode]
    if passcode != nil && passcode.length > 1
        redirect_to :controller => app, :action => capp, :passcode => passcode
    end
  end

  def capp
    @passcode = params[:passcode]
    @query = params[:query] <-- I used pry and the query was being updated but the view itself was not. 
    if @query != nil
      respond_to do |format| 
        format.html
        format.js {}
      end
    end
  end
end

我的capp.js.erb文件

addSongToPlaylist("<%= @query %>");
// For the record. I tried to also do this:
// addSongToPlaylist("<%= j render @query %>"); <-- But the app errored out saying render was an undefined method name...and all the online tutorials have their function rendering for some reason.

我的capp.js文件

function addSongToPlaylist(query) {
    var c = "</br>" + query;
    $("#query").append(c);
}

我只希望我在上面的表格中输入的查询放在下面的位置。但是，一旦我点击提交，应用程序就不会执行任何操作。请求通过（我可以看到服务器发送 GET 请求）但视图没有更新。请帮忙！

我按照教程进行了 AJAX 调用，但由于某种原因它仍然无法正常工作

Answer 1

首先，你为什么不为你的 form_tag 使用 path helper？

你会受益于使用类似的东西：

#config/routes.rb
get "/search/:query", to: "application#search", as: :search

这将允许您使用以下内容：

<%= form_tag search_path, remote: true, method: :get %>
    <%= text_field_tag :query %>
    <%= submit_tag "Search" %>
<% end %>

这会将 get request 发送到您的 /search/:query 路径，然后您将能够使用您的 JS 进行处理（稍后解释）：

#app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  respond_to :html, :js
  def search
    @passcode = params[:passcode]
    @query = params[:query]
  end
end

这应该为您处理请求，希望打开 app/views/application/search.js.erb

--

JS

为了清楚起见，让我们将函数放入您调用的 JS 文件中：

#app/views/application/search.js.erb
$("#query").append("<br> <%=j @query %>");

这将执行您的 addSongToPlaylist 函数正在执行的操作。

考虑到您已经填充了 @query 变量，并且正在正确传递 ajax，这应该可行。

调试

您将遇到的主要问题之一是您没有调试应用程序。

在这种情况下，有许多潜在问题可能会阻止您的 Ajax 触发：

Your ajax isn't being passed (IE JQuery is not loaded)

Your path is incorrect

Your controller isn't handling the request properly

You're not handling the JS correctly

最初测试的方法是查看浏览器开发人员控制台的网络选项卡:

要访问它，right-click、inspect element，然后 select network。这将为您提供已发送到服务器的所有请求及其响应的列表。

当您单击 "form submit" 按钮时 - 检查是否调用了新请求。如果没有，这通常意味着您的应用中没有 jquery（Rails UJS 所要求的）。

--

接下来，您需要检查 Rails 控制台，看看您是否收到任何请求。如果没有，它不会显示任何通过的内容。

您所期望的是在您提交 "search" 表单时看到一组新的命令被触发。这将向您显示触发了哪个 controller#action。如果是对的，继续前进。

--

最后，你需要检查你的JS。

您可以使用 alerts:

#app/views/application/search.js.erb
alert("<%=j @query %>");
$("#query").append("<br> <%=j @query %>");

如果警报正常触发，您就成功了。

RoR 4 form_tag AJAX 请求问题

RoR 4 form_tag AJAX request issue

javascript

ajax

jquery

ruby-on-rails

spotify