jQueryを使用して返されたJSONオブジェクトを表示する

Question

いくつかのJSON戻り値を表示する方法がわかりません。

私のスクリプトは次のように動作します。

私は、モデルでそれを処理してデータベースに向けていくつかのクエリを作成し、その後json_encodedを返すよCodeIgniterのコントローラにいくつかのparamsを送信し、AJAX呼び出しを作ってるんです行をajaxコールバック関数に渡します。これは素晴らしいbtw動作します。

ここで私が今ここでやりたいことは、ここで私が立ち往生しているところです。新しいJSONオブジェクト（データベース行を含む）をhtmlテーブルの古い行に置き換えたいだから、私は通過しているパラメータに応じてテーブルを更新したいが、tbodyの心だけでテーブルを更新したい。

私はjqueryで新しいので、私はいくつかのことを試しました。私はjsonのデータを繰り返し、$ .html（文字列）関数を使用してみましたが、これはすべてを置き換えて、最終的には最後のオブジェクトを表示します（私は正しいのですか？）。

だから私はこれを一般的な意味でどうやって行うのだろうか？

Answer 1

$.ajax({ 
    type: 'GET', 
    url: 'someSite.com/someEndpoint' 
    data: xyz. 
    success: function(response) { 
     //lets say you have an object like this: object = { data: { ... } } 
     var html = ''; 
     for(var i = 0; i<response.data.length; i++) { 
      html += '<tr><td>'+response.data[i].title+'</td></tr>'; 
     } 
     $('#someTable tbody').html(html); 
    } 
}); 

Answer 2

あなたはは、AJAXリクエストでJSONオブジェクトを返すようにを持っていません。 $ .ajaxの "html"呼び出しの設定をdata_typeに設定してください（または、空白のままにしておいてください - jQueryは応答データから実際にそれを把握するのが大変です）。

私は通常、ビューの一部分をそれ自身のビューの部分に分解します。そして、 "元の"ページの読み込みでそれを使うことができるので、AJAXを更新することもできます。

HTMLと一緒に何らかのオブジェクト指向の応答が必要な場合は、アスタリスクだけです。アヤックス成功関数の

{ 
    "stat": "ok", 
    "payload": "<tr><td>row1</td></tr><tr><td>row2</td></tr>" 
} 

そして：であなたの通過をparamsはしている何

$.post('/controller/action', { some: 'data' }, function(response) { 
    $('#my_table tbody').append(response.payload); 
}, 'json'); 

Answer 3

私は通常、このような何かをしますか？

たとえば、選択フィールドまたは入力フィールドを使用してajax呼び出しをトリガーし、その値をパラメーターとして渡すことができます。

var tableObj = { 

    var init : function(){ 
     //check that your selectors id exists, then call it 
     this.foo(); 
    }, 
    foo : function(){ 

     var requestAjax = function(param){ 
      var data = {param : param} 
      $.ajax({ 

       data : data, 
       success : function(callback){ 
        console.log(callback);//debug it 

        $("tbody").empty();//remove existing data 

        for(var i =0; i < callback.data.length; i++){}//run a loop on the data an build tbody contents 

        $("tbody").append(someElements);//append new data 
       } 
      }); 
     } 
     //trigger event for bar 
     $("#bar").keyup(function(){ 
       requestAjax($(this).val()); 
     }); 
    } 

} 

$(function(){ 
    tableObj.init(); 
}) 

PHPの方法

public function my_method(){ 
    if($this->input->is_ajax_request()) 
    { 
     //change the output, no view 
     $json = array(
      'status' => 'ok', 
      'data' => $object 
     ); 

     $this->output 
      ->set_content_type('application/json') 
      ->set_output(json_encode($json)); 
    } 
    else 
    { 
     show_404(); 
    } 
}