Rails - 为什么不是ajax向GET请求发送params

时间:2016-06-01 16:25:23

标签: javascript ruby-on-rails ajax

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

的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是因为我不希望在网址中显示param。

为了澄清我在访问此页面时需要url始终处于/ pending状态,并且没有params或其他:在url中标识的id。此页面应始终显示db的随机记录。我需要发送一个参数的唯一原因是确保即使它们是随机的,也不会连续重复记录。

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

routes.rb 更改为:

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

并将 sitewide.js.erb 更改为:

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

答案 2 :(得分:1)

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

@register.filter
def imgsrc(user):
    return 'myapp/{}_{}.jpg'.format(user.first_name, user.last_name)

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

$('#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"
  });
});

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

同样,如果您期待回复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,请在您的ajax调用中提及。如果它确实有助于您解决问题,请告诉我。

  

更新

让我们在你的页面中说,它显示div中html对象的数据,

@pending_item

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

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

在您的控制器中,您可以执行以下操作:

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

在您的部分档案中&#34; _pendint_item.html.erb&#34;您将访问您的实例变量@pending_item并显示数据

这会将响应作为html发送到服务器,并且您只会将div的html设置为此。

  

更新2

您的部分可能看起来像这样,或者只是想要显示您的待处理项目。要知道的是它将访问您在控制器方法中定义的相同实例变量format.html { render partial: 'pending_item', layout: false } ,除非您将@pending_item传递给它。

locals

我建议您在ajax调用的成功回调中执行<div class="pending_item"> <h3><%= @pending_item.name %></h3> <p><%= @pending_item.description %></p> </div> ,以查看您从服务器返回的内容。