如何从 URL 加载 JSON 并在 HTML 页面上使用纯 javascript 显示？答案

【问题标题】：How to load JSON from URL and display by using plain javascript on HTML page?如何从 URL 加载 JSON 并在 HTML 页面上使用纯 javascript 显示？
【发布时间】：2019-07-20 00:03:31
【问题描述】：

我正在尝试从特定 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>

【问题讨论】：

标签： javascript json url

【解决方案1】：

有许多错误会阻止您的代码执行您希望它执行的操作。

您正在尝试访问具有content id 的元素在元素加载到页面之前。像这样想。您的 script 和 body 元素的组织方式是你的 script 将在 body 元素之前加载和执行及其子级已加载。

罪魁祸首是这一行： document.getElementById('content').innerHTML = jsonDoc.

它属于onreadystatechange 函数，因为你只当您收到来自 API。

如果您将该行移至 onreadystatechange 函数，您现在可以访问您从 API 检索到的数据，并且不需要 jsonDoc 全局变量。
request.responseType = 'json' 代码提出了这种描述性错误。

InvalidAccessError: synchronous XMLHttpRequests do not support timeout and responseType.

删除该行代码，因为它正在尝试的操作不是允许。
你永远不会发送请求，因为request.send() 在里面处理 API 响应的代码。它应该在那个函数之外。
在 onreadystatechange 函数中，您还需要 JSON.stringify使用JSON.parse后的数据要显示的字符串。

修复所有这些后，您的 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 上阅读有关 using the Fetch API 的更多信息。

【讨论】：

感谢您的更正！它以我想要的方式完美运行。

【解决方案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();
    }

【讨论】：

【解决方案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”的字段值处理表单数据。您可能可以从这里确定您想要做什么。希望这会有所帮助。

【讨论】：