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函数，因为您仅想要从您的网站收到数据时更新content 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。

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 个答案: