以表格格式将 $.ajax 响应附加到 Jquery UI 对话框答案

【问题标题】：appending $.ajax response to Jquery UI dialog box in table format以表格格式将 $.ajax 响应附加到 Jquery UI 对话框
【发布时间】：2017-11-09 11:05:20
【问题描述】：

我正在从 db as 获取 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 即将到来

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

【问题讨论】：

数据如何响应请控制台.log

标签： php jquery ajax jquery-ui

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

【讨论】：

它说Cannot use 'in' operator to search 'length' in
您的 php 响应看起来像一个字符串。在php中创建表可以吗？在这种情况下，这似乎是一个更好的解决方案。

【解决方案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 对象设计的，具有索引和元素对。你所做的并没有错，只是解释了为什么你可能会使用其中一个。

希望这会有所帮助。如果有不清楚的地方请告诉我。

【讨论】：