javascript - 如何解析 JSON 对象并将值作为字符串显示在屏幕上？

Question

目前我正在使用 JSON 发送以下内容

{“约翰”:[{“硬币”:“600”，“名字”:“约翰”}]}

我怀疑换行符应该在那里。我想在本例中取硬币的值(value) 600 并将其显示在 div 中。

function importCoins(str) {

    if (str=="") {
        document.getElementById("coins").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }


    xmlhttp.onreadystatechange=function() {


        if (xmlhttp.readyState==4 && xmlhttp.status == 200){
            alert(xmlhttp.response);

            data = JSON.parse(xmlhttp.response);
            receivedData(data);

        }
    }

     function receivedData(data) {
     document.write(data.Coins);
     };

    xmlhttp.open("GET","http://server/~name/folder/extractUser.php");
    xmlhttp.responseType = "json";
    xmlhttp.send();
}

importCoins();

这是我的 PHP 代码:

include("mysqlconnect.php");

$query  = "SELECT Coins, First_name  FROM users WHERE Id = 1";
$result = mysql_query($query) or die (mysql_error());
$data = array();

while($rows = mysql_fetch_array($result,MYSQL_ASSOC)){
$data[$rows['First_name']][] = $rows;
}
echo json_encode($data);

Answer 1

and display it in a div

假设您有 <div id="my_target"></div>在您的HTML中，设置其中的文本可以如下完成

var elm = document.getElementById('my_target'); // HTMLElement or null
elm.textContent = 'foo'; // set it's text to "foo"

这仅在元素存在后有效。换句话说，您需要等待页面完成加载或仅在 <script> 中启动此代码。元素的关闭标签之后的标签

<小时/>

现在，假设您有一个 JavaScript 对象 var o = {bar: 'baz'}; ，您可以像这样访问它的属性

o['bar']; // "baz" (the value by accessing _key_ "bar" from _Object_ o

如果您不知道对象中的键，您可以执行for..in循环它们

var key;
for (key in o) {
    console.log(key, o[key]); // logs "bar" "baz"
}

<小时/>

要在调用某些内容之前等待当前页面完成加载，请监听Window 对象上的load 事件

window.addEventListener('load', function () {
    // code to invoke after page has loaded
});

<小时/>

最后，当使用XMLHttpRequest获取JSON时，您有内置的方法来自动解析它，因此您最终可以获得一个JavaScript对象。 p>

var xhr = new XMLHttpRequest(),
    method = 'GET',
    url = "http://server/~name/folder/extractUser.php";
xhr.addEventListener('load', function (e) {
    // code to invoke after receiving response
    console.log(this.response); // let's log the object
});
xhr.open(method, url);
xhr.responseType = 'json'; // let the request know to expect JSON
xhr.send();

<小时/>

把它们放在一起；

function getJSON(url, callback) {
    var xhr = new XMLHttpRequest(),
        method = 'GET';
    xhr.addEventListener('load', function (e) {
        callback(this.response);
    });
    xhr.open(method, url);
    xhr.responseType = 'json';
    xhr.send();
}

function displayCoins(obj) {
    var elm = document.getElementById('my_target');
    elm.textContent = obj["John"][0]["Coins"];
}

window.addEventListener('load', function () { // wait for page to load
    // then invoke it
    getJSON("http://server/~name/folder/extractUser.php", displayCoins);
});

<小时/>

最后说明； 当您遇到 JavaScript 问题或正在调试时，请务必检查您的控制台输出。这为您提供了更多信息，并且通常可以让您发现问题(如果不知道向 Google 搜索哪条错误消息)。

<小时/>

I'm struggling to adjust your final solution in order to fit in var key; for (key in o) { console.log(key, o[key]); // logs "bar" "baz" } Could you edit your completed solution to have unknown keys

我没有包含这一点，因为我不知道如果您的对象中有很多键或只有一个键，您想要的行为。在这个例子中我只假设一个；

输入 for..in在 displayCoins 中循环功能

function displayCoins(obj) {
    var elm = document.getElementById('my_target'),
        key;
    for (key in obj) {
        elm.textContent = obj[key][0]["Coins"];
        break; // stop after first key
    }
}