从URL（JavaScript）读取JSON数据

Question

Attempt 2 to get my question right (please bear with me - I'm new). 尝试2使我的问题正确（请耐心等待-我是新来的）。

I am trying to read data from a URL 我正在尝试从URL读取数据

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

and want to use Javascript to reformat it to the screen as table but 并希望使用Javascript将其重新格式化为表格形式的屏幕，但是

(1) I can't get it to read and （1）我无法阅读和阅读

(2) I can't format it to a table as in json2table.com （2）我无法像json2table.com一样将其格式化为表格

Can anyone help? 有人可以帮忙吗？ Here is the code I am trying. 这是我正在尝试的代码。

    <!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

In this example you are assuming jQuery is present by having bootstrap.js loaded. 在此示例中，您假设通过加载bootstrap.js来存在jQuery。 This is not the case and you either need to load jQuery before bootstrap OR move your script to the bottom of the page (right before the body is closed) and remove this $(window).load(function(){}) . 情况并非如此，您要么需要在引导程序之前加载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>

If you decide to use jQuery, your code can be simplified a lot: 如果您决定使用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 个解决方案

解决方案1
0 2018-08-15 21:24:55

从URL（JavaScript）读取JSON数据

问题描述

1 个解决方案

解决方案1 0 2018-08-15 21:24:55

解决方案1
0 2018-08-15 21:24:55