Ajaxから返されたデータをdivに追加する方法 - JQuery + Rails 3.1

私は、コントローラから返されたデータを取得してdivに追加しようとしています。私が持っているコードはここにあります:

$(this).parent().find('list').append(__WHAT_GOES_HERE?__);

How should I get data to append using ajax in JQuery? I know this is a very basic question -- I'm new to JS :(

PS. Lets assume the controller's path is /ajax_get_items

0

3 答え

I assume you want to load it into a class, so list would be .list

何かのようなもの:

$.ajax({
    url: "/ajax_get_items",
    type : "POST",
    data : {//If you need data to be posted
        id : 12,
        num : "test"
    },
    success : function(result){
        $(this).parent().find('.list').append(result);
       //If a JSON object is returned, use the following line:
       //$(this).parent().find('.list').append(result.html);

    }
})

または、パラメータなしでデータをロードするだけの場合(GETメソッド):

$(this).parent().find('.list').load("/ajax_get_items");

If you want more information about ruby rails and jQuery: http://brandonaaron.net/blog/2009/02/24/jquery-rails-and-ajax

2
追加された

これはあなたが必要とするものです:

  $.ajax({
    url: '/ajax_get_items',
    success: function(data) {
    $('#selector').parent().find('list').append(data)
}
});

この呼び出しが行われた場所によっては、このコンテキストで 'this'を使用できないことに注意してください。そうしないと、予期しない結果に終わる可能性があります

0
追加された
それは、OPが尋ねたことと、ほとんど入手できないことではないレールで、有効なhtmlを得るのはかなり簡単です。操作が必要な場合、またはJSONオブジェクトが想定されている場合でも、データは引き続き関数内で操作できます
追加された 著者 Mihalis Bagos,
htmlを返すコントローラの非常に一般的なケースの1つの例は、モーダルダイアログの優雅な劣化です。通常のレイアウト内に表示されるdivと同じdivをajax経由で返すことができます。
追加された 著者 Mihalis Bagos,
あなたのソリューションは、データが正しいHTMLマークアップに入っていることを期待しています。これはバックエンドシステムから得られるものではありません。それはJSとのフロントエンドで行われなければなりません。
追加された 著者 Arindam,
真実。あなたはJSONを返すことができますが、まだhtmlではありません。そして、コントローラからhtmlを返すのは意味がありません。 JSONという標準表記でデータを返すだけです。しかし、必要に応じてデータをフォーマットするのは、データの消費者の負担です。これは、用語の分離が本当に達成される方法です。そのため、新しい呼び出し元が要求していない、フォーマットされたhtmlではなく、データのみを返す他の場所で同じ関数を使用することができます
追加された 著者 Arindam,
$('somelink').click(function(e) {
  e.preventDefault();
  $.ajax(url, data, success:function(resData) {
    resultSet = resData.extract(resData);
  }
}

基本的に、この部分はajax呼び出しからの応答を処理し、 extract は返されたデータから必要なhtmlを構築することになっています。

この後、あなたは単に言うことができます

$(this).parent()。find( 'list')。append(resultSet);

しかしこれは、返されたデータを関数 extract で主な作業が行われていることを前提としています。 そこにあなたのリスト(または何でも)htmlが必要です。

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript