簡體   English   中英

使用(JavaScript)從文件中獲取JSON數據

[英]Get JSON data from a file using (JavaScript)

我需要知道如何在不使用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完成嗎

<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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM