Question

我想将json_encode结果中的每个元素显示为PHP中的表格格式（见下文）。在这种情况下，jQuery代码（在标题部分中）和PHP代码（在正文部分中）位于同一PHP页面中。

任何人都可以帮助我吗？

+-------+-------+
|fruit  |price  |
+-------+-------+
|apple  |1.2    |
+-------+-------+
|pear   |1.5    |
+-------+-------+
|orange |1.0    |
+-------+-------+

test.php的结果：

[{"fruit":"apple","price":1.2},{"fruit":"pear","price":1.5},{"fruit":"orange","price":1.0}]

上面的代码是test.php的结果，使用了json_encode（）。

jQuery：

$(document).ready(function(){
                $.ajax({
                   type: "POST",
                   dataType:"Json",
                   url: "test.php",
                   success: function(result){


                   }
                 });
            });

Answer 1

您可以使用以下内容：

$(document).ready(function(){
var json_array = '';
$.ajax({
    type: "POST",
    dataType:"Json",
    url: "test.php",
    success: function(result){
        // Parse JSON
        var array_json = $.parseJSON(array_json);
        // We add each row in the table
        $.each(array_json, function(){
            $('#results').append('<tr><td>' + this.fruit + '</td><td>' + this.price + '</td></tr>');
        });
    }
});

}）;

使用以下HTML：

<table id="results">
    <tr>
        <th>Fruit</th>
        <th>Price</th>
    </tr>
</table>

（根据您的HTML结构更改ID）

Answer 2

这是一些HTML

<table id="fruits">
  <tr>
    <td>Fruit</td>
    <td>Price</td>
  </tr>
<table>

你的jQuery

success: function(result){
  var t = $("table#fruits");
  $.each(result, function(i, fruit){
    t.append('<tr><td>' + fruit.fruit + '</td><td>' + fruit.price + '</td></tr>');
  });
}

在jsfiddle

上查看此处的工作

如何将json_encode结果中的每个元素显示为PHP表格

2 个答案: