如何從URL加載JSON並通過在HTML頁面上使用純JavaScript進行顯示？

Question

我正在嘗試從特定的URL獲取JSON數據，並將其顯示在HTML頁面上，以檢查其是否有效。 我不知道出什么問題了，應該修復我的代碼。

<script>
        var jsonDoc="";
        function loadJSON(url){
            //alert(url);
            var request = new XMLHttpRequest();

            request.open('GET', url, false);
            request.responseType = 'json';
            request.onreadystatechange = function(){
                if(request.readyState == 4 && request.status == 200){
                    jsonDoc = JSON.parse(request.responseText);
                }else{
                    jsonDoc = null;
                }

                request.send();

            };
        }
        document.getElementById('content').innerHTML = jsonDoc;
</script>

<body>
    <h1>Enter URL for Highest-grossing films List JSON File</h1>
    <form>
        <input type="text" id="url" value=""><br>
        <input type="button" name="submit" value="Submit Query" onclick="loadJSON(document.getElementById('url').value)">
    </form>

    <div id="content"></div>
</body>

Answer 1

有很多錯誤阻止您的代碼執行您想要的操作。

您試圖在頁面上加載元素之前訪問具有content ID的元素。 這樣想吧。 您的script和body元素的組織方式使得您的script將在body元素及其子元素加載之前首先加載並執行。
罪魁禍首是這一行： document.getElementById('content').innerHTML = jsonDoc 。
它屬於onreadystatechange函數，因為您僅在從API接收數據后才想更新content 。
如果將該行移至onreadystatechange函數，則現在可以訪問從API檢索的數據，並且不需要jsonDoc全局變量。
request.responseType = 'json'代碼引發此描述性錯誤。
InvalidAccessError: synchronous XMLHttpRequests do not support timeout and responseType.

刪除該行代碼，因為它正在嘗試不允許的操作。
您永遠不會發送請求，因為request.send()位於處理API響應的代碼內。 它應該在該功能之外。
在onreadystatechange函數中，在使用JSON.parse將數據放入要顯示的字符串后，您還需要對數據進行JSON.stringify 。

修復所有問題后，您的JavaScript應該看起來與此類似。

<script>
  function loadJSON(url) {
    let request = new XMLHttpRequest();

    request.open('GET', url, false);
    request.onreadystatechange = function() {
      if (request.readyState == 4 && request.status == 200) {
        const data = JSON.parse(request.responseText);
        document.getElementById('content').innerHTML = JSON.stringify(data);
      }
    };
    request.send();
  }
</script>

更現代的JavaScript做法是使用fetch API。 它使從API提取數據變得更加容易。 這與使用fetch API的上述代碼等效。

<script>
  function loadJSON(url) {
    fetch(url)
      .then(function(res) { return res.json(); })
      .then(function(data) {
         document.getElementById('content').innerHTML = JSON.stringify(data);
      });
  }
</script>

您可以閱讀有關在MDN上使用Fetch API的更多信息。

Answer 2

收到響應后將其添加到DOM。

request.onreadystatechange = function() {
  // here
};

還移動request.send(); 在request.onreadystatechange回調之外：

    var jsonDoc="";
    function loadJSON(url){
        //alert(url);
        var request = new XMLHttpRequest();

        request.open('GET', url, false);
        request.responseType = 'json';
        request.onreadystatechange = function(){
            if(request.readyState == 4 && request.status == 200){
                jsonDoc = JSON.parse(request.responseText);
                document.getElementById('content').innerHTML = jsonDoc;
            }else{
                jsonDoc = null;
            }
        };
        request.send();
    }

Answer 3

我在這里可能不滿意，但是我認為您的方法最主要的錯誤是輸入文本字段沒有“名稱”字段。 我對您的代碼進行了一些更改，以便找到一種方法來獲取該名稱字段的值，以查看其值。 這可能不是您想要的，但是它提供了一種找到參數的方法，然后您可以根據需要使用它們。 這是經過修改的代碼，其中包含幾個簡單的javascript函數以提供幫助：

<html>
<head>
<script>
function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    alert('sURL = ' + sURL);
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}
 function printDiv(divName) {
     alert('In printDiv with divName '+divName);
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     var replyStr = "Post parameters for 'dest':\r\n" + getURLParameters('dest'); // "1234";
     alert(replyStr);
     document.write(replyStr);
//     document.body.innerHTML = replyStr;
}
</script>
</head>
<body>
    <h1>Enter URL </h1>
    <form >
        <input type="text"  name="dest" value=""/><br/>
        <br />
        <input type="submit" name="submit" value="Submit Query" onClick="return(printDiv('printableArea'))"/>
    </form>

    <div id="content"></div>
    <div id="printableArea">
      <h1>Print me</h1>
</div>

</body>
</html>

我打算將響應放回printableAres innerHTML中，但要寫出來並停在那里。 主要更改是在接收URL的文本字段中添加名稱“ dest”，並使用getURLParams作為“ dest”的字段值來處理表單數據。 您可能可以從這里算出您想做什么。 希望這可以幫助。

如何從URL加載JSON並通過在HTML頁面上使用純JavaScript進行顯示？

問題描述

3 個解決方案

解決方案1
0 已采納 2019-07-20 01:05:28

解決方案2
0 2019-07-20 01:09:05

解決方案3
0 2019-07-20 16:33:15

如何從URL加載JSON並通過在HTML頁面上使用純JavaScript進行顯示？

問題描述

3 個解決方案

解決方案1 0 已采納 2019-07-20 01:05:28

解決方案2 0 2019-07-20 01:09:05

解決方案3 0 2019-07-20 16:33:15

解決方案1
0 已采納 2019-07-20 01:05:28

解決方案2
0 2019-07-20 01:09:05

解決方案3
0 2019-07-20 16:33:15