Fatal编程技术网
  • jquery/
  • Jquery 如何在表列表视图中回显json数据

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

jquery ajax cakephp

Jquery 如何在表列表视图中回显json数据,jquery,ajax,cakephp,Jquery,Ajax,Cakephp,我有一个从ajax调用的函数，我从函数中获取json格式的数据。 我想一个接一个地显示表列表视图中的所有数据。我的函数工作正常，正在获取数据…但我不知道如何在表列表视图中回显数据。 请帮我在桌子上重复这个 下面的数据是我从ajax调用中获得的响应数据。 {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26

我有一个从ajax调用的函数，我从函数中获取json格式的数据。 我想一个接一个地显示表列表视图中的所有数据。我的函数工作正常，正在获取数据…但我不知道如何在表列表视图中回显数据。 请帮我在桌子上重复这个

下面的数据是我从ajax调用中获得的响应数据。

{"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"}}]}

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();
}
我的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"}}]}

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();
}
我的ajax脚本

    <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>


$（文档）.ready（函数（）{
$（“#驱动程序”）。在（'change'，function（）上{
var id=$（this.val（）；
如果（id）{
var dataString='id='+id；
var values=$（this.serialize（）；
ajaxRequest=$.ajax({
url:“”，
键入：“post”，
数据：dataString，
成功：功能（响应、数据）{
如果（数据=“成功”）{
var return_data=$.parseJSON（响应）；
$（“#datatable”）.html（返回_数据['count']）；
}
},
});
}
});
});
我想在下表中显示数据

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

                         <tr>                     
                        <th>Lucky</th>
                        <th>9960181380</th>
                       <th>2016-05-11</th>
                        <th>Ship goods</th>
                        </tr>
                       <tr>                     
                        <th>Lucky</th>
                        <th>9960181380</th>
                       <th>2016-05-01</th>
                        <th>Ship goods</th>
                        </tr>
                        </tbody></table>


名称
可移动的
起始日期
货物名称
幸运的
9960181380
2016-05-11
装运货物
幸运的
9960181380
2016-05-01
装运货物
尝试以下代码：

  header('Content-Type: application/json');
   $json= json_encode($Data, JSON_PRETTY_PRINT);
   print_r($json);
请尝试以下代码：

  header('Content-Type: application/json');
   $json= json_encode($Data, JSON_PRETTY_PRINT);
   print_r($json);
html:
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);

var-tr；
对于（var i=0；ihtml:





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);



var-tr；
对于（var i=0；i，以下是您的答案：



$（文档）.ready（函数（）{
var return_data={“count”：[{“drivers”：{“name”：“Lucky”，“mobile”：“9960181380”}，“DispatchedJob”：{“startdate”：“2016-05-11”，“created”：“2016-05-26 14:08:06”}，“job”：{“Ship_title”：“Ship goods”}，{“drivers name”：“Lucky”，“mobile”：“9960181380”}，“DispatchedJob”：“startdate”：“2016-05-01”，“created”：“2016-05-26 10:03:25”}，“job”：“船舶货物”}}]}；
var tbody_content=“”；
$.each（返回\u data.count，函数（索引，项）{
tbody_内容+=
"" +
“”+item.drivers.name+“”+
“”+item.drivers.mobile+“”+
“”+item.DispatchedJob.startdate+“”+
“”+item.job.shipping_title+“”+
"";
});
$（'.table'）.find（'tbody'）.html（tbody_内容）；
})；



名称
可移动的
起始日期
货物名称

以下是您的答案：



$（文档）.ready（函数（）{
var return_data={“count”：[{“drivers”：{“name”：“Lucky”，“mobile”：“9960181380”}，“DispatchedJob”：{“startdate”：“2016-05-11”，“created”：“2016-05-26 14:08:06”}，“job”：{“Ship_title”：“Ship goods”}，“drivers”：{“name”：“Lucky”，“mobile”：“9960181380”}，“DispatchedJob”：“startdate”：“2016-05-01”，“created”：“2016-05-26 10:03:25”}，“job＠装运货物“}}]}；
var tbody_content=“”；
$.each（返回\u data.count，函数（索引，项）{
tbody_内容+=
"" +
“”+item.drivers.name+“”+
“”+item.drivers.mobile+“”+
“”+item.DispatchedJob.startdate+“”+
“”+item.job.shipping_title+“”+
"";
});
$（'.table'）.find（'tbody'）.html（tbody_内容）；
})；



名称
可移动的
起始日期
货物名称

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>




名称
可移动的
起始日期
货物名称


ajax成功回调中的JS：


// 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(''));



//来自ajax调用的数据
var数据={“计数”：[{“驱动程序”：{“名称”：“幸运”，“移动”：“9960181380”}，“分派作业”：{“起始日期”：“2016-05-11”，“创建”：“2016-05-26 14:08:06”}，“作业”：{“装运货物”：“装运货物”}，{“驱动程序”：“名称”：“幸运”，“移动”：“9960181380”}，“分派作业”：{“起始日期”：“2016-05-01”，“创建”：“2016-05-26 10:03:25”}，“装运货物”};
var-trs=[]；
for（data.count中的变量i）{
trs.push（“+data.count[i].drivers.name+
“”+data.count[i].drivers.mobile+“”+
“”+data.count[i]。DispatchedJob.startdate+“”+
“+data.count[i].job.shipping_title+”）；
}
$（'table tbody'）.html（trs.join（“”））；


不要取消循环中的字符串，它总是分配内存，所以您可以很容易地获得内存异常


HTML：



名称
可移动的
起始日期
货物名称


ajax成功回调中的JS：


// 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(''));



//来自ajax调用的数据
var数据={“计数”：[{“驱动程序”：{“名称”：“幸运”，“移动”：“9960181380”}，“分派作业”：{“起始日期”：“2016-05-11”，“创建”：“2016-05-26 14:08:06”}，“作业”：{“装运货物”：“装运货物”}，{“驱动程序”：“名称”：“幸运”，“移动”：“9960181380”}，“分派作业”：{“起始日期”：“2016-05-01”，“创建”：“2016-05-26 10:03:25”}，“装运货物”};
var-trs=[]；
for（data.count中的变量i）{
trs.push（“+data.count[i].drivers.name+
“”+data.count[i].drivers.mobile+“”+
“”+data.count[i]。DispatchedJob.startdate+“”+
“+data.count[i].job.shipping_title+”）；
}
$（'table tbody'）.html（trs.join（“”））；


不要取消循环中的字符串，它总是分配内存，所以您可以很容易地获得内存异常


但是如何在td内打印我的值..我正在获取id和datehtml[i].idhtml[i].datebut如何在td内打印我的值..我正在获取id和datehtml[i].idhtml[i].dateuse json_解码函数它是giv