Question

我有一个函数，我从ajax.i调用从函数获取json格式的数据。我想逐一显示表listview中的所有数据..我的功能正常工作并获取数据...但我不知道如何在表列表视图中回显数据。请帮我在表格中回应一下。

数据下面的

是我从ajax电话获得的响应数据。

public class CamelCaseExceptDictionaryKeysResolver : CamelCasePropertyNamesContractResolver
    {
        protected override JsonDictionaryContract CreateDictionaryContract(Type objectType)
        {
            JsonDictionaryContract contract = base.CreateDictionaryContract(objectType);
            contract.PropertyNameResolver = propertyName => propertyName;
            return contract;
        }
    }

我的cakephp功能。

{"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]}

我的ajax脚本

public function fetchDriverlist()
{   
    $this->autoRender = false;        
    $this->loadModel('DispatchedJob');
    $driverlist = array();
    if (isset($this->request['data']['id'])) {
        $driverlist = $this->DispatchedJob->find('all', array(
        'recursive' => -1,
        'conditions' => array('DispatchedJob.driver_id' => $this->request['data']['id']),
        'fields' => array('drivers.name','drivers.mobile','DispatchedJob.startdate','DispatchedJob.created','job.shipment_title'),
        'joins' => array(
                array(
                    'table' => 'drivers',
                    'alias' => 'drivers',
                    'type' => 'LEFT',                   
                    'conditions'=> array('DispatchedJob.driver_id = drivers.id')
                ),  
                 array(
                    'table' => 'jobs',
                    'alias' => 'job',
                    'type' => 'LEFT',                   
                    'conditions'=> array('DispatchedJob.job_id = job.id')
                )         
            ),
            'order' => array('DispatchedJob.id'=>'DESC')
        ));
    }
    header('Content-Type: application/json');           
    return json_encode(array('count' => $driverlist));      
    exit();
}

我想在下表中显示数据

    <script>
$(document).ready(function() {
     $("#driver").on('change', function() {
        var id = $(this).val(); 
        if (id) {
        var dataString = 'id=' + id;  
        var values = $(this).serialize();
        ajaxRequest= $.ajax({
             url: '<?php echo Router::url(array("controller" => "Drivers", "action" => "fetchDriverlist")); ?>',
            type: 'post',
            data: dataString,
            success: function(response, data) {
            if(data == "success") {           
                var return_data = $.parseJSON(response);
                $("#datatable").html(return_data['count']);
            }
            },
        });
    }
    });
});
</script>

Answer 1

HTML：

<table>
<tboday id='print'>
</tbody>
</table>

javascript在表格中显示数据

var tr;
for(var i=0;i<html.length;i++){
tr=tr+"<tr><td>youe_value</td><td>Your_value</td></tr>";
}
$('#print').html(tr);

输出

<table>
<thead>
<tr>                     
<th>Job Title</th>
<th>Vehicle Type</th>
</tr>
</thead>
<tbody>
<tr>                     
<td>Your value</td>
<td>Your value</td>
</tr>
</tbody>
</table>

Answer 2

这是你的答案：

＆＃13;

$(document).ready(function() {

var return_data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]};

var tbody_content = "";

$.each(return_data.count, function (index, item) {
  tbody_content += 
    "<tr>" +
      "<td>" + item.drivers.name + "</td>" +
      "<td>" + item.drivers.mobile + "</td>" +
      "<td>" + item.DispatchedJob.startdate + "</td>" +
      "<td>" + item.job.shipment_title + "</td>" +
    "</tr>";
});

$('.table').find('tbody').html(tbody_content);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>                     
      <th>name</th>
      <th>mobile</th>
      <th>startdate</th>
      <th>shipment title</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

＆＃13;

Answer 3

HTML：

<table class="table table-striped">
    <thead>
       <tr>                     
          <th>name</th>
          <th>mobile</th>
          <th>startdate</th>
          <th>shipment title</th>
       </tr>
   </thead>
   <tbody></tbody>
</table>

JS在ajax成功回调：

// Data from your ajax call
var data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]};

var trs = [];
for(var i in data.count){
    trs.push("<tr><td>" + data.count[i].drivers.name + 
    "</td><td>" + data.count[i].drivers.mobile + "</td>" +
    "<td>" + data.count[i].DispatchedJob.startdate + "</td>" +
    "<td>" + data.count[i].job.shipment_title + "</td>");
}
$('table tbody').html(trs.join(''));

不要在循环中使用cancat字符串，它总是分配内存，因此你可以很容易地从内存异常中获取。

demo fiddle

Answer 4

试试这段代码：

  header('Content-Type: application/json');
   $json= json_encode($Data, JSON_PRETTY_PRINT);
   print_r($json);

如何在表列表视图中回显json数据

4 个答案: