Отображать возвращенные объекты JSON с помощью jQuery

Question

Мне сложно понять, как отобразить некоторые возвращаемые объекты JSON.

Мой скрипт работает так:

Я делаю вызов ajax, отправляю некоторые параметры в контроллер CodeIgniter, где обрабатываю его с помощью модели, делаю несколько запросов к базе данных и затем возвращаю строки json_encoded в функцию обратного вызова ajax. Это прекрасно работает, кстати.

Вот что я хочу сделать сейчас, и вот где я застрял. Я хочу, чтобы новые объекты JSON (содержат строки базы данных) «заменяли» старые строки в HTML-таблице. Поэтому я хочу обновить таблицу в зависимости от параметров, которые я передаю, но только в уме.

Я новичок в jquery, поэтому я попробовал несколько вещей. Я пробовал перебирать данные json и использовать функцию $ .html (string), но я думаю, это заменит все, и в конечном итоге он просто отобразит последний объект (я прав?).

Так мне интересно, как в общем смысле я бы это сделал?

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

У вас нет для возврата объектов JSON в запросе AJAX.Попробуйте задать для параметра конфигурации data_type для вызова $ .ajax значение «html» (или оставьте это поле пустым - jQuery действительно хорош в этом, исходя из данных ответов).<tbody>...</tbody> часть представления к его частичному представлению.Тогда «оригинальная» загрузка страницы может использовать его, как и обновляющий вызов AJAX.

Единственная звездочка для этого - если вам нужен какой-то объектно-ориентированный ответ вместе с HTML.Я обычно делал бы что-то вроде этого:

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

А затем в функции успеха ajax:

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