文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从URL加载JSON并在HTML页面上使用普通的javascript显示？

问如何从URL加载JSON并在HTML页面上使用普通的javascript显示？
EN

Stack Overflow用户

提问于 2019-07-20 00:03:31

回答 3查看 1K关注 0票数 1

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

json

url

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-07-20 01:05:28

有许多错误阻止您的代码执行您希望它做的事情。

在将元素加载到页面之前，您正在尝试访问具有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上阅读更多关于使用获取API的信息。

票数 0

Stack Overflow用户

发布于 2019-07-20 01:09:05

在收到响应后将其添加到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();
    }

票数 0

Stack Overflow用户

发布于 2019-07-20 16:33:15

我可能不在这里，但我认为在您的方法中，主要的错误是输入文本字段没有“名称”字段。我对您的代码做了一些更改，这样我就可以找到一种方法来获取名称字段的值，以查看它的值。这可能不是你想要的，但是它提供了一种找到你的参数的方法，然后你可以根据你的意愿来处理它们。下面是带有几个简单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，但后来写了出来，就在那里停了下来。主要更改是将名称'dest‘添加到接收URL的textfield中，并使用getURLParams对字段值“dest”处理表单数据。你也许可以从这里算出你想要做的事。希望这能有所帮助。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57120756

复制

相似问题

问如何从URL加载JSON并在HTML页面上使用普通的javascript显示？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从URL加载JSON并在HTML页面上使用普通的javascript显示？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从URL加载JSON并在HTML页面上使用普通的javascript显示？
EN