javascript - 将 json_encode($data) 转换为 div 的仅数据列表的最简单方法

Question

我是 json_encode 的新手。

---

• 来自另一个函数的 data.php 已经存在并生成 json_encode($data)

• json_encode($data) 仅保存来自 "SELECT name,size FROM lists";

的名称和大小

• window.onload = function ()
(function () {
var a = document.getElementById( 'myDiv');
if (a) {//*需要列表*//}});

---

有没有办法将 json_encode($data) 提取成列表形式，例如: NAME (SIZE) ;上面的 window.onload 函数每行一个名称/大小？

我在这上面浪费了很多时间，很想找到一个解决方案，但我打算编写另一个页面 list.php 来运行 onload 来填充 div。认真地想知道这一点以备将来使用。

JSON:

[{"name":"Cheese Burger","size":"100"}, 
 {"name":"miles","size":"51"},
 {"name":"Halloweens","size":"20"}]

Div 看起来像:

芝士汉堡 (100)
英里大小 (51)
万圣节 (20)

---

通常我会编码:

<?php
$query  = "SELECT * FROM lists";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){?>

<li><?php echo $row['name'] . " (" . $row['size']. ") "; ?></li>

<?php } ?>

但我不了解 json 的全部功能并尝试添加到我的知识库中。
那么我如何使用 JSON 获得相同的结果？

Answer 1

如果我理解你的话，这就是你想要的:

window.onload = function() {
    var a = document.getElementById("mydiv");
    var hr = new XMLHttpRequest();
    hr.open("GET", "data.php", true);
    hr.setRequestHeader("Content-type", "application/json");
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
        var data = JSON.parse(hr.responseText);
      //var data = [{"name":"Cheese Burger","size":"100"}, 
      //            {"name":"miles","size":"51"},
      //            {"name":"Halloweens","size":"20"}];
        a.innerHTML = "";       
        var html='';
        for (var i in data) {
            html +=  data[i].name + "("+ data[i].size +") <br />";
        }
    a.innerHTML=html; 
        }
    }
    hr.send(null);
}

它会在你的 div 中输出 <div id="mydiv" name=""> :

Cheese Burger(100) 
miles(51) 
Halloweens(20)