0

我在 PHP 中有一个函数，它返回这样的 JSON：

{"tableRow":[ {"tipo":"Noche"},{"patente":"XZ7410"},{"nombre":"Marcela Bien"},
              {"revisado":0},{"id_registro":"10"},
              {"tipo":"Vespertino"},{"patente":"EW3651"},{"nombre":"Alexis Diaz"},
              {"revisado":1},{"id_registro":"9"} ]
}

也有这个表与一些默认创建的 HTML 内容：

<table class="table table-condensed table-striped table-hover table-bordered pull-left" id="data-table">    
  <thead>
    <tr>
      <th>Turno</th>
      <th>ID Máquina</th>
      <th>Operador</th>
      <th>Semáforo</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody id="data-update">
    <tr>
      <td>Noche</td>
      <td>XZ7410</td>
      <td>Marcela Bien</td>
      <td><img src="/monitor/web/images/bullet_red.png" /></td>
      <td><a class="btn btn-success btn-mini" href="/monitor/web/frontend_dev.php/ver-detalles/10">Ver detalles</a></td>
    </tr>
    <tr>
      <td>Vespertino</td>
      <td>EW3651</td>
      <td>Alexis Diaz</td>
      <td><img src="/monitor/web/images/bullet_orange.png" /></td>
      <td><a class="btn btn-success btn-mini" href="/monitor/web/frontend_dev.php/ver-detalles/9">Ver detalles</a></td>
    </tr>
  </tbody>
</table>

我想用从 PHP 生成的内容更新 #data-update HTML 内容，并将其作为 JSON 提供给 jQuery，所以我编写了以下代码：

$(document).ready(function() {
    setInterval(function() {
    $.ajax({
        type: 'get',
        url: '<?php echo url_for('dashboard/BuildAjax') ?>',
        dataType: 'json',
        success: function(data) {
            var newRows;
            for (var i in data.tableRow) {
                newRows += "<tr><td>" + data.tableRow[i].tipo + "</td>"
                newRows += "<td>" + data.tableRow[i].patente + "</td>"
                newRows += "<td>" + data.tableRow[i].nombre + "</td>"
                newRows += "<td>" + data.tableRow[i].revisado + "</td>"
                newRows += "<td>" + data.tableRow[i].id_registro + "</td></tr>"
            }
            $("#data-update").html(newRows);
        },
        error: function() {
            alert('<?php echo __('Error al cargar los datos') ?>');
        }
    });
    }, 10000);
});

HTML 内容已更改，但方式不正确。这是什么意思？结果，我得到了一张这样的表格：

Turno      ID Maquina  Operador        Semaforo    
Noche      undefined   undefined       undefined
undefined  XZ7410      undefined       undefined 
undefined  undefined   Marcela Bien    undefined 
undefined  undefined   undefined       1
undefined  undefined   undefined       undefined      10

Vespertino undefined   undefined       undefined
undefined  EW3651      undefined       undefined 
undefined  undefined   Alexis Diaz     undefined 
undefined  undefined   undefined       0
undefined  undefined   undefined       undefined      12

什么时候应该得到类似的东西：

Turno      ID Maquina  Operador        Semaforo 
Noche      XZ7410      Marcela Bien    1           10
Vespertino EW3651      Alexis Diaz     0           12

怎么了？我找不到我犯错的地方，有什么帮助或建议吗？

4

5 回答 5

3

您的 tableRow 数据不正确，因为它仅包含一行 10 个元素。

不应该是：

{"tableRow":[ 
    {
        "tipo":"Noche",
        "patente":"XZ7410",
        "nombre":"Marcela Bien",
        "revisado":0,
        "id_registro":"10"
    },
    {
        "tipo":"Vespertino",
        ...
    }
]}
于 2013-07-09T21:47:34.813 回答
3

那是因为你有糟糕的 JSON。你需要一些这样的结构

{"tableRow":[ {"tipo":"Noche",
               "patente":"XZ7410",
               "nombre":"Marcela Bien",
               "revisado":0,
               "id_registro":"10"},
              {"tipo":"Vespertino"
              ,"patente":"EW3651",
               "nombre":"Alexis Diaz",
               "revisado":1,
               "id_registro":"9"} 
            ]
}
于 2013-07-09T21:48:17.607 回答
1

我看到了两个问题。

问题1：

您的 JSON 结构与您尝试使用它的方式不匹配。为了使您的代码以您期望的方式工作，您的 JSON 应该像这样构造：

{
    "tableRow": [{
        "tipo": "Noche",
        "patente": "XZ7410",
        "nombre": "Marcela Bien",
        "revisado": 0,
        "id_registro": "10"
    }, {
        "tipo": "Vespertino",
        "patente": "EW3651",
        "nombre": "Alexis Diaz",
        "revisado": 1,
        "id_registro": "9",
    }]
}

最好的解决方案是更正 JSON 的结构，以便每一行都是一个对象，但如果您打算在现有 JSON 结构的情况下更正此问题，则需要执行以下操作：

var newRows = '',
    row = 0,
    i = 0;
for (row = 0; row < data.tableRow; row += 1) {
    if (row % 5 === 0) {
        newRows += "<tr>";
        for (i in data.tableRow[row]) {
            newRows += "<td>" + data.tableRow[row][i] + "</td>"
        }
        newRows += "</tr>";
    }
}
$("#data-update").html(newRows);

问题 2

不像问题 1 那样糟糕，但是您没有提供初始值，newRows因此将字符串附加到它会给您带来以下结果：

undefined<tr><td>... //rest of string

解决方案是定义newRows为空字符串：

var newRows = '';
于 2013-07-09T22:04:04.480 回答
1

正如@Bobbe 所建议的那样，您可以让您的PHP 函数输出更容易使用的json。但是如果你被当前的输出卡住了，你可以像这样解析它：

...
success: function(data) {
  var n, newRows = '', tds = data.tableRow;
  $.each(tds, function(i, td) {
     n = i % 4;
     switch(n) {
       case 0:
         newRows += '<tr><td>' + td.tipo + '</td>';
         break;
       case 1:
         newRows += '<td>' + td.patente + '</td>';
         break;
       case 2:
         newRows += '<td>' + td.nombre + '</td>';
         break;
       case 3:
         newRows += '<td>' + td.id_registro + '</td></tr>';
         break;
      }
    });
    $("#data-update").html(newRows);
    ...
于 2013-07-09T22:07:14.480 回答
0

您的 for 循环正在对 JSON 中的每个项目进行迭代，就像它应该做的那样（为什么实际上为每一行定义了一个项目，它“认为”的项目是整行数据）......格式您的 JSON，以便它为每行数据提供单独的项目。

于 2013-07-09T21:53:19.853 回答