Question

我无法弄清楚如何显示一些返回JSON对象。

我的脚本是这样的：

我正在进行ajax调用，将一些参数发送到CodeIgniter控制器，我在其中使用模型处理它，对数据库进行一些查询，然后将json_encoded行返回到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调用的data_type配置设置为“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

你传入的参数是什么？

例如，您可以使用select或input字段来触发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();
    }
}

使用jQuery显示返回的JSON对象

3 个答案: