Question

我需要知道如何在不使用Jquery的情况下使用JavaScript获取json数据。我只想知道如何使用JavaScript获取数据。

我的Json文件。

{"JsonProjectIDResult":[{"_capacity":15,"_description":"Meeting Room","_dev_default_view":3,"_deviceID":1,"_deviceName":"MobiTech","_deviceTypeID":1,"_projectID":1,"_roomID":2,"_roomName":"Room2","_room_admin_mail":null}]}

我的home.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JavaScript Get Json</title>

</head>
<body>

<h1>My Home Page</h1>

<div id="results">
    <!-- Display Jason Data -->
</div>

<script>

    var resultDiv = document.getElementById("results");

    var newsURL = "http://localhost:81/testjs/data.json";

    var e;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        e = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        e = new ActiveXObject("Microsoft.XMLHTTP");
    }

    e.onreadystatechange = function() {

        var html = " ";

        if (e.readyState == 4 && e.status == 200) {
            response = JSON.parse(e.responseText);

            if(typeof(e.responseText)==="string") {
                d = e.responseText;
            } else {
                if (typeof(e.responseXML)==="object") {
                    d = e.responseXML;
                };
            }

            var myData = response['JsonProjectIDResult'];

            //Print results 
            html  = myData[0]._capacity+"<br />";
            html += myData[0]._description+"<br />";
            html += myData[0]._dev_default_view+"<br />";
            html += myData[0]._deviceID+"<br />";
            html += myData[0]._deviceName+"<br />";
            html += myData[0]._deviceTypeID+"<br />"; 
            html += myData[0]._projectID+"<br />"; 
            html += myData[0]._roomID+"<br />"; 
            html += myData[0]._roomName+"<br />"; 
            html += myData[0]._room_admin_mail+"<br />";

            resultDiv.innerHTML = html;
        }
    };

    e.open("GET", newsURL, true);
    e.send();

</script>

</body>
</html>

在我的朋友们给了我一些有用的答案后，我想知道我的代码是这样的。它正在发挥作用。现在我需要将其作为循环运行。当每个记录使用循环显示时。我可以用JavaScript完成吗。

Answer 1

<script>
var resultDiv = document.getElementById("results");

var newsURL = "http://localhost:81/testjs/data.json";


var xmlhttp;

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) {
        response = JSON.parse(xmlhttp.responseText);
        //here you can manipulate the response as you wish, for example you can:
        var myData = response['JsonProjectIDResult'];
        // myData now is an array of the json object
        var html = '<ul>';
        for(var prop in myData ) {
            if(myData.hasOwnProperty(prop))
                 html += '<li>' + prop  + ' = ' + myData[prop] + '</li>';
        }
        html += '</ul>';
        //and so on
        resultDiv.innerHTML = html;
    }
}

xmlhttp.open("GET", newsURL, true);
xmlhttp.send();
</script>

使用（JavaScript）从文件中获取JSON数据

1 个答案: