Rails - なぜajaxがGETリクエストにparamsを送信しないのですか？

Question

ajaxを使用してgetリクエストでデータを送信しようとしていますが、paramが送信されていないようです。私はdbからランダムな項目を示すページを持っています。あなたはnavbarのリンクからこのページに行きます。このページに移動すると、現在のアイテムをスキップして別のランダムなアイテムを見つけることができるリンクがあり、次のアイテムがユーザーが見ていたものでないことを確認します。

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 

私はnavbarリンクのアクションとページのリンクを使用しているので、htmlとjsの両方に応答しました。ページ上のリンクはスキップボタンで、別のランダムな項目が表示されます。

sitewide.js.erb

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

私は、サーバーのログに見るとStarted GET "/pending"...氏は述べているが、送信されているのparamの一切の言及がありません。私は何が欠けていますか？

なぜ私はこのためにajaxを使用しているのですか？なぜなら、私はurlにparamを表示したくないからです。

説明のために、このページにアクセスするときにurlが必要です。このページには、uramsで識別されたparamsまたはadditional：idが常に/保留中である必要があります。このページには常にdbというランダムなレコードが表示されます。私がパラメを送る必要がある唯一の理由は、ランダムであっても連続して記録が繰り返されないようにすることです。

Answer 1

は、私はあなたがデフォルトのリンクアクションを防ぐために必要があると思う：

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

Answer 2

ながらできそれはあなたがしようとしている方法は、私はそれがGET要求でデータを送信することであることを指摘する価値があると思いますか反パターンのビット。だから、それを「正しい」方法でやってはどうでしょう？私はそのを送信する形式をチェックすることができたい

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

Answer 3

：

はあなたに routes.rbをを変更

：

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

とにsitewide.js.erbを変更しますあなたのコントローラへのクエリ。フロントエンドで受け取りたい形式の種類。

$('#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オブジェクトのデータを示し、

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

あなたにAJAX要求を作っていますコントローラでは、div＃pending_itemに新しいpending_itemを表示させます。あなたは

インスタンス変数@pending_itemと表示データにアクセスします

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

そして、あなたの部分的なファイル「_pendint_item.html.erb」で：あなたのような何かをお使いのコントローラで

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

これはサーバーへの応答を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)を行うことをお勧めします。