Question

尝试2回答我的问题（请多多包涵-我是新来的）。

我正在尝试从URL读取数据

http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json

，并希望使用Javascript将其重新格式化为表格形式，但是

（1）我无法阅读和

（2）我无法像json2table.com中那样将其格式化为表格

有人可以帮忙吗？这是我正在尝试的代码。

    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Playing with JSON</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

      <style type="text/css">
        .row{ margin-top: 20px}
      </style>

      <script type="text/javascript">
        $(window).load(function(){

        console.log('loading event handlers');
        var $response = document.getElementById("response");
        var $getReposBtn = document.getElementById("get-repos");
        $getReposBtn.onclick = function(){
            var xhr = new XMLHttpRequest();
            xhr.timeout = 2000;
            xhr.onreadystatechange = function(e){
                console.log(this);
                if (xhr.readyState === 4){
                    if (xhr.status === 200){
                        // debugger;
                        // console.log(xhr.response);
                        $response.innerHTML = xhr.response;
                    } else {
                        console.error("XHR didn't work: ", xhr.status);
                    }
                }
            }
            xhr.ontimeout = function (){
                console.error("request timedout: ", xhr);
            }
            xhr.open("get", "http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json", /*async*/ true);
            xhr.send();
        }
        });
    </script>

    </head>
    <body>
      <div class="container">
          <div class="row">In Development</div>
        <div class="row">
            <button id="get-repos">JSON download trial!!</button>
        </div>
        <div class="row">
            <pre id="response"></pre>
        </div>
    </div>

      <script>
        if (window.parent && window.parent.parent){
          window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "9f7sb409"
          }], "*")
        }
      </script>
    </body>
    </html>

Answer 1

在此示例中，您通过加载bootstrap.js来假定存在jQuery。情况并非如此，您要么需要在引导程序之前加载jQuery，要么将脚本移至页面底部（在关闭正文之前）并删除此$(window).load(function(){})。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Playing with JSON</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <style type="text/css">
    .row {
      margin-top: 20px
    }

  </style>
</head>

<body>
  <div class="container">
    <div class="row">In Development</div>
    <div class="row">
      <button id="get-repos">JSON download trial!!</button>
    </div>
    <div class="row">
      <pre id="response"></pre>
    </div>
  </div>

  <script>
    if (window.parent && window.parent.parent) {
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "9f7sb409"
      }], "*")
    }
  </script>

  <script>
    console.log('loading event handlers');
    var $response = document.getElementById("response");
    var $getReposBtn = document.getElementById("get-repos");
    $getReposBtn.onclick = function () {
      var xhr = new XMLHttpRequest();
      xhr.timeout = 2000;
      xhr.onreadystatechange = function (e) {
        console.log(this);
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            // debugger;
            // console.log(xhr.response);
            $response.innerHTML = xhr.response;
          } else {
            console.error("XHR didn't work: ", xhr.status);
          }
        }
      }
      xhr.ontimeout = function () {
        console.error("request timedout: ", xhr);
      }
      xhr.open("get", "http://test.fhir.org/r3/Patient?family=smith&given=peggy&_format=json", /*async*/ true);
      xhr.send();
    }

  </script>
</body>

</html>

如果您决定使用jQuery，则可以大大简化您的代码：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Playing with JSON</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <style type="text/css">
    .row {
      margin-top: 20px
    }

  </style>
</head>

<body>
  <div class="container">
    <div class="row">In Development</div>
    <div class="row">
      <button id="get-repos">JSON download trial!!</button>
    </div>
    <div class="row">
      <pre id="response"></pre>
    </div>
  </div>

  <script>
    if (window.parent && window.parent.parent) {
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "9f7sb409"
      }], "*")
    }
  </script>

  <script>
    $(function () {
      console.log('loading event handlers');

      $("#get-repos").click(function onClick() {
        var url = "http://test.fhir.orgs/r3/Patient?family=smith&given=peggy&_format=json";

        $.getJSON(url, function onSuccess(response) {
          $("#response").text(JSON.stringify(response));
        });
      });
    });
  </script>
</body>

</html>

从URL（JavaScript）读取JSON数据

1 个答案: