Question

所以我想在我的form_tag中做一个AJAX请求。基本上，用户可以输入歌曲名称或艺术家姓名，我只想将他们搜索到的内容发布到播放列表中（非常简单）

这些是我的文件：

我的表单

 <%= 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使用#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 %>

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

/search/:query

这会将path helper发送到您的#app/controllers/application_controller.rb class ApplicationController < ActionController::Base respond_to :html, :js def search @passcode = params[:passcode] @query = params[:query] end end路径，然后您可以使用您的JS处理（在一秒钟内解释）：

app/views/application/search.js.erb

此应该处理您的请求，希望打开#app/views/application/search.js.erb $("#query").append("<br> <%=j @query %>");

-

<强> JS

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

addSongToPlaylist

这将执行@query函数正在执行的操作。

考虑到您已填充JQuery变量，并且正确传递了ajax，这应该可以。

<强>调试

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

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

您的ajax未被传递（IE right-click未加载）

您的路径不正确

您的控制器未正确处理请求

你没有正确处理JS

最初测试的方法是查看浏览器开发者控制台的网络标签：

get request

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

当您点击＆＃34;表单提交＆＃34;按钮 - 检查是否调用了新请求。如果没有，通常意味着您的应用中没有Rails UJS（alerts要求）。

-

接下来，您需要检查Rails控制台，看看您是否收到了任何请求。如果没有，它将不会显示任何事情。

您期望的是在您提交＆＃34;搜索＆＃34;时，会看到触发的一组新命令。形成。这将显示已触发的控制器＃操作。如果是的话，继续前进。

-

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

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

执行此操作

secondCore{id, resid, title, name, cat, role, exp}

如果警报正在激发，你就会受到打击。

RoR 4 form_tag AJAX请求问题

1 个答案: