Rails - 为什么 ajax 不向 GET 请求发送参数

Question

我正在尝试使用 ajax 通过获取请求发送数据，但似乎没有发送参数。我有一个页面显示来自数据库的随机项目。您可以通过导航栏中的链接访问此页面。进入此页面后，有一个链接可让您跳过当前项目以查找另一个随机项目，以确保下一个项目不是用户刚刚查看的项目。

routes.rb

get 'pending', to: 'items#pending'

查看

<%= link_to 'Skip', '', class: "btn btn-default btn-xs",
                     id: "skip-btn",
                     :'data-item-id' => @pending_item.id %>

控制器

def pending
    @previous_pending_item_id = params[:id] || 0
    @pending_items = Item.pending.where("items.id != ?", @previous_pending_item_id)
    @pending_item = @pending_items.offset(rand @pending_items.count).first
    respond_to do |format|
      format.js
      format.html
    end
  end

我对 html 和 js 都有响应，因为我正在使用导航栏链接的操作以及页面上的链接。页面上的链接是跳过按钮，应该会弹出另一个随机项目。

sitewide.js.erb

  $('#skip-btn').on('click', function () {
    $.ajax({
      data: {id: $(this).data("item-id")},
      url: "/pending"
    });
  });

当我查看服务器日志时显示Started GET "/pending"...，但没有提及正在发送的参数。我错过了什么？

我为此使用 ajax 的原因是我不希望参数显示在 url 中。

为澄清起见，我需要在访问此页面时始终将 url 设为 /pending，并且在 url 中标识没有参数或附加 :id。此页面应始终显示来自 db 的随机记录。我需要发送参数的唯一原因是确保没有记录是连续重复的，即使它们是随机的。

Answer 1

我认为您需要阻止默认链接操作：

  $('#skip-btn').on('click', function (event) {
    event.preventDefault();
    ...
  });

Answer 2

虽然您可以按照您尝试的方式进行操作，但我认为值得指出的是，在 GET 请求中发送数据有点反模式。那么为什么不以“正确”的方式来做呢！

将您的 routes.rb 更改为：

get 'pending/:id', to: 'items#pending'

并将 sitewide.js.erb 更改为：

$('#skip-btn').on('click', function () {
    $.ajax({
      url: "/pending/" + $(this).data("item-id")
    });
  });

Answer 3

我希望您检查将查询发送到您的控制器的格式。以及您希望在前端接收的格式类型。

$('#skip-btn').on('click', function (e) {
  e.preventDefault();
  $.ajax({
    dataType: 'json', //This will ensure we are receiving a specific formatted response
    data: {id: $(this).data("item-id")},
    url: "/pending"
  });
});

在您的控制器中，您可能希望将其作为 json 对象传回。

def pending
  #@previous_pending_item_id = params[:id] || 0
  #No need to make it an instance variable
  previous_pending_item_id = params[:id] || 0

  #Same goes for pending_items. No need to make it a instance variable, unless you're using it somewhere else.
  pending_items = Item.pending.where("items.id != ?", previous_pending_item_id)
  @pending_item = pending_items.offset(rand pending_items.count).first
  respond_to do |format|
    format.js
    format.html
    format.json { render json: @pending_item.as_json }
  end
end

这样您就可以从响应中获取价值并将其附加到您的页面。

同样，如果您期待 js 或 html 回复，您应该在您的 ajax 调用中提及这一点。如果它确实可以帮助您解决问题，请告诉我。

更新：

假设在你的页面中，它将@pending_item对象的数据显示在一个div中，

<div id="pending_item">...</div>

当您向控制器发出 ajax 请求时，您希望 div#pending_item 显示一个新的随机pending_item。

$('#skip-btn').on('click', function (e) {
  e.preventDefault();
  $.ajax({
    dataType: 'html', //we'll receive a html partial from server
    data: {id: $(this).data("item-id")},
    url: "/pending",
    success: function(res){
      //We'll set the html of our div to the response html we got
      $("#pending_item").html(res);
    }
  });
});

在您的控制器中，您可以执行以下操作：

format.html { render partial: 'pending_item', layout: false }

在您的部分文件“_pendint_item.html.erb”中，您将访问您的实例变量@pending_item 并显示数据

这会将响应以 html 的形式发送到服务器，您只需将 div 的 html 设置为此。

更新 2

您的部分可能看起来像这样，或者只是您想要显示待处理项目。要知道的是，它将访问您在控制器方法中定义的同一实例变量 @pending_item，除非您将 locals 传递给它。

<div class="pending_item">
  <h3><%= @pending_item.name %></h3>
  <p><%= @pending_item.description %></p>
</div>

我建议您在 ajax 调用的成功回调中执行 console.log(res) 以查看您从服务器返回的内容。