使用 jQuery 显示返回的 JSON 对象答案

【问题标题】：Display returned JSON objects with jQuery使用 jQuery 显示返回的 JSON 对象
【发布时间】：2012-03-31 07:48:49
【问题描述】：

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

我的脚本是这样工作的：

我正在进行 ajax 调用，将一些参数发送到 CodeIgniter 控制器，在那里我使用模型对其进行处理，对数据库进行一些查询，然后将 json_encoded 行返回给 ajax 回调函数。顺便说一句，这很好用。

这就是我现在想做的事情，而这正是我卡住的地方。我希望新的 JSON 对象（包含数据库行）“替换”html 表中的旧行。所以我希望它根据我传递的参数更新表格，但仅限于头脑中。

我是 jquery 的新手，所以我尝试了几件事。我已经尝试遍历 json 数据并使用 $.html(string) 函数，但我想这会替换所有内容，它最终只会显示最后一个对象（对吗？）。

所以我想知道在一般意义上我会如何做到这一点？

【问题讨论】：

能贴出你想用的JS代码吗？

标签： php jquery ajax json codeigniter

【解决方案1】：

你传入的参数是什么？

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

【讨论】：

【解决方案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');

【讨论】：

我想我会尝试只用桌子的一部分来查看这个东西。听起来很整洁，谢谢！

【解决方案3】：

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

【讨论】：