将 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) { //*Need list*// }});

---

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

我为此浪费了很多时间，并且想要一个解决方案，但我要编写另一个页面列表.php以运行加载以填充div。 在这一点上认真地想知道将来的知识。

杰森：

[{"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) 

Answer 2

// var json comes from php
function convert(json){
    var obj={};
    for(var ii=0;ii<json.length;ii++){
        obj[json[ii].name]=json[ii].size;
    };
    return obj;
}

您可以使用来自 PHP 端json_encode的数据调用此函数。