Javascript Rails-为什么不'；t ajax发送参数以获取请求_Javascript_Ruby On Rails_Ajax

Javascript Rails-为什么不'；t ajax发送参数以获取请求

javascript ruby-on-rails ajax

Javascript Rails-为什么不'；t ajax发送参数以获取请求,javascript,ruby-on-rails,ajax,Javascript,Ruby On Rails,Ajax,我试图使用ajax通过get请求发送数据，但参数似乎没有被发送。我有一个页面显示数据库中的一个随机项。您可以通过导航栏中的链接访问此页面。此页面上有一个链接，允许您跳过当前项目以查找另一个随机项目，确保下一个项目不是用户刚刚查看的项目 routes.rb $('#skip-btn').on('click', function () { $.ajax({ data: {id: $(this).data("item-id")}, url: "/pending"

我试图使用ajax通过get请求发送数据，但参数似乎没有被发送。我有一个页面显示数据库中的一个随机项。您可以通过导航栏中的链接访问此页面。此页面上有一个链接，允许您跳过当前项目以查找另一个随机项目，确保下一个项目不是用户刚刚查看的项目

routes.rb

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

get'pending'，to:'items#pending'

查看

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

我对html和js都有响应，因为我使用的是navbar链接的操作以及页面上的链接。页面上的链接是“跳过”按钮，该按钮将显示另一个随机项目

sitewide.js.erb

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

当我查看服务器日志时，显示的是

startedget”/pending“…

，但没有提到正在发送的参数。我错过了什么

我之所以使用ajax，是因为我不希望url中显示参数

为了澄清，我需要在访问此页面时始终保持/挂起url，url中未标识任何参数或附加：id。此页面应始终显示数据库中的随机记录。我需要发送参数的唯一原因是确保没有记录每次连续重复，即使它们是随机的。

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

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

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

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

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

将您的路线。rb更改为：

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

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

并将sitewide.js.erb更改为：

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

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

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

将您的路线。rb更改为：

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

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

并将sitewide.js.erb更改为：

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

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

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

$('#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调用中提到这一点。让我知道它是否有助于您解决问题

更新：

假设在您的页面中，它在div中显示了

@pending_item

对象的数据

…

当您向控制器发出ajax请求时，您希望div#pending_项显示新的随机pending_项

$('#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

，除非您将

局部变量

传递给它

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

我建议您在ajax调用的成功回调中执行一个

console.log（res）

，以查看您从服务器得到了什么。