Question

我试图在网页上显示json，并且我使用以下代码，但它不起作用，谁能帮我理解我做错了什么？

<link href='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.css' rel='stylesheet'>

<div id="fullPage">
  <div class="section" data-anchor="skynet">
    <div class="slide one" data-anchor="main">
      Slide 1
    </div>

    <div class="slide two" data-anchor="about_us">
      Slide 2
    </div>

    <div class="slide three" data-anchor="faq">
      Slide 3
    </div>

    <div class="slide four" data-anchor="news">
      Slide 4
    </div>
  </div>
</div>
<div class='test'>
  <div class="bg-main active" id="bgOne">1</div>
  <div class="bg-main" id="bgTwo">2</div>
  <div class="bg-main" id="bgThree">3</div>
  <div class="bg-main" id="bgFour">4</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/jquery.fullpage/2.9.4/jquery.fullpage.min.js'></script>

Answer 1

您的网址不正确。此外，您应该删除代码中提到的注释掉的行以使其工作。

您可以使用此虚拟网址来检查它是否正常工作： https://reqres.in/api/users?page=2

function send()
{
    var xmlhttp = new XMLHttpRequest();
    //xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    xmlhttp.open("GET", "http://stam/1.1/json/url=https://www.google.co.il");
     xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.send();
  // Remove the below commented lines and change the url
  //     xmlhttp.responseType = 'json';
  //     xmlhttp.setRequestHeader("Content-Type", "application/json");
  //     xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
    var requestDoneAndOK = false;
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status === 200) {
                //requestDoneAndOK = true;  
                var jsonResponse = JSON.parse(xmlhttp.responseText);
                document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<BR><textarea rows='100' cols='100'>" + jsonResponse + "</textarea>";

            }               
        }
    };

}

Answer 2

您提供的网址似乎不起作用。打开浏览器控制台（F12并切换到控制台选项卡）。例如，如果您尝试http://date.jsontest.com/，浏览器控制台将记录任何错误。

出于某种原因，Firefox允许我提出请求，但Chromium没有。 Chromium的控制台提供了有问题的确切行号。

我删除了第二个xmlhttp.setRequestHeader("Content-Type", "application/json");。
它还告诉我xmlhttp.responseType = 'json';中的回复类型应为text。

这是最终产品。请注意，我必须指定JSON对象的键才能获取其值：jsonResponse.time

<button type="submit" onclick="javascript:send()">call</button>

<div id="div"></div>

<script type="text/javascript" language="javascript">
  function send() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "http://date.jsontest.com/");
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.send();
    xmlhttp.responseType = 'text';
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState === 4) {
        if (xmlhttp.status === 200) {
          var jsonResponse = JSON.parse(xmlhttp.responseText);
          document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<br><textarea rows='100' cols='100'>" + jsonResponse.time + "</textarea>";
        }
      }
    };
  }
</script>

打印出整个JSON对象：

// var jsonResponse = JSON.parse(xmlhttp.responseText); No need for this.
document.getElementById("div").innerHTML = xmlhttp.statusText + ":" + xmlhttp.status + "<br><textarea rows='100' cols='100'>" + xmlhttp.responseText + "</textarea>";

此外，unobtrusive JavaScript的概念值得一看。

尝试使用JS在HTML中显示Json响应

2 个答案: