Question

我从db获取php文件中的数据

while ($row=mysqli_fetch_row($result))
    {
    printf ("beacon id : %s \n",$row[2]);
    printf ("beacon uuid :(%s)\n",$row[3]);

    }

现在我想将这些数据附加到表中并在JQueryUI对话框中显示，如下所示

在ajax成功形式中，我试图创建硬核表并获取数据

 success: function(response){                    

            for (var i = 0; i < 3; i++) {
                var row = $('<tr></tr>').appendTo(mytable);
                for (var j = 0; j < 3; j++) {
                    $('<td></td>').text("text1").appendTo(row);
                }

            }
    $('<table></table>').appendTo("#dialog");

    $("#dialog").dialog("open");        

        }

工作正常

///////////////

当我试图让我的数据无法正常工作时

我试过

 success: function(response){                    

         var table = $("#table tbody");
     $.each(response, function(idx, elem){
         table.append("<tr><td>"+elem.id+"</td></tr>");
     });


    $('<table></table>').appendTo("#dialog");

    $("#dialog").dialog("open");        

        }

但它不起作用，

console.log就像

一样

我可以修改什么来显示数据？

Answer 1

您不会在表格中添加数据，而是创建新的空表格元素并附加数据。

编辑：你也不能循环一个字符串（这是ajax响应）。如果在php中输出html，事情会更简单。这也是未经测试的，但希望你能得到这个想法。

PHP：

while ($row = mysqli_fetch_row($result)) {
    printf("<tr><th>beacon id :<th> <td>%s</td><tr>", $row[2]);
    printf("<tr><th>beacon uuid :<th> <td>(%s)</td><tr>", $row[3]);
};

JS：

success: function (response) {
    if (response) {
        var table = $("#table tbody");

        table.append(response);
        table.appendTo("#dialog");

        $("#dialog").dialog("open");
    }
}

Answer 2

首先，我会调整你的PHP，以便它发送回JSON数据。您现在发回的数据只是文本。它不会被JS读取为Object。

<强> PHP

$beacon = array();
while ($row=mysqli_fetch_row($result)){
    $beacon[] = array("id" => $row[2], "uuid" => $row[3]);
}
header('Content-type:application/json;charset=utf-8');
echo json_encode($beacon);

请参阅：Returning JSON from a PHP Script

这会创建一个数组数组。结果页面应该是：

[
  {
    "id": "Beacon00UUID::fda50693-a4e2-4fb1-afcf-c6eb07647825",
    "uuid": "(Beacon00RSSI::-69)"
  },
  {
    "id": "Beacon01UUID::2f234454-f491-1ba9-ffaf-000000000001",
    "uuid": "(Beacon01RSSI::-53)"
  },
  {
    "id": "Beacon02UUID::b9407f30-f5f8-466e-aff9-25556b57fe6d",
    "uuid": "(Beacon02RSSI::-75)"
  },
  {
    "id": "Beacon04UUID::00000000-0000-0000-0000-000000000000",
    "uuid": "(Beacon04RSSI::-88)"
  },
]

这将允许您的jQuery将内容收集为JSON。在success回调中，您可以更好地处理此问题。这也假设你在AJAX调用的其他地方有dataType: "json"。

<强>的jQuery

success: function(response){
  var $tbl = $("<table>");
  $.each(response, function(key, val){
    var $row = $("<tr>").appendTo($tbl);
    if(key % 2 == 0){
      $row.addClass("even");
    } else {
      $row.addClass("odd");
    } 
    var $cell = $("<td>").html(val.id).appendTo($row);
  });
  $("#dialog").html($tbl.prop("outerHTML")).dialog("open");
}

现在，如果您的数据以beacon id的密钥返回，则需要完全调用它。例如，它不是elem.id，它必须是elem['beacon id']来调用对象中的正确索引。您不能使用包含索引名称中的空格的点表示法。在命名索引时要记住这一点。

与$.each()和.each()存在细微差别，前者是针对数组和对象设计的，具有键和值对，后者是为jQuery对象设计的，具有索引和元素对。你做了什么没有错，只是解释为什么你可以使用另一个。

希望这会有所帮助。如果有什么不清楚，请告诉我。

以表格格式

2 个答案: