Question

我在下面创建了一个虚拟JSON文件，以测试此html页面是否有效。如何通过ajax请求加载数据？我唯一的错误是

未捕获的ReferenceError：未定义数据。

如何在html页面中调用此JSON文件？一直在尝试，但无济于事。如果有帮助，请从view-source获得

index.html

<!DOCTYPE HTML>
<html>
<head>
  <title>Matter Timeline</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="bootstrap.js"></script>
   <!-- load handlebars for templating, and create a template -->
  <script src="dist/handlebars-v4.0.11.js"></script>
  <script id="item-template" type="text/x-handlebars-template">
      {{target}} 
      <font color="#229954"><b>{{status_green}}</b></font>
      <font color="#A93226"><b>{{status_red}}</b></font>
      <br/>
      <font size="2" color="#2874A6">{{action}}</font> 
      <font size="2" color="#2874A6"><i>{{user}}</i></font> <br/> 
      <span class="tooltip-date">{{datetime}}</span>
  </script>

  <script src="dist/vis.js"></script>
  <link href="dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <script>

    function resettimeline() {
        document.location.reload();
    };
  </script>     
</head>

<body>
<p>
  <center><h2>Matter Timeline</h2></center>
</p>
<div id="visualization"></div>

<script type="text/javascript">
  var groups = new vis.DataSet([
    {id: 0, content: 'Process/Task', value: 1},
    {id: 1, content: 'Req/Matter/Doc', value: 2}
  ]);

  var source = document.getElementById('item-template').innerHTML;
  var template = Handlebars.compile(document.getElementById('item-template').innerHTML);

  $.ajax({
    url: 'http://127.0.0.1:8887/data.json',
    dataType: "json",
    success: function(data) {
        //handle you data here
    }
  });

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    },
    orientation: {
        axis: 'top',
        item: 'top'
    },
    height: "85vh",
    template: template
    //timeAxis: {scale: 'day', step:3}
  };


  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(data); 


  timeline.on('doubleClick', function (properties) {
    window.open('the_doc_url', 
                'newwindow', 
                'width=1000,height=600'); 
    return false;
  });

</script>
<br/>
<a href="javascript:resettimeline()">Fit to Width</a>
</body>
</html>

data.json

{
  "data": [
    { 
        id: 1, group: 0, 
        target: 'Request',
        action: 'from',
        user: 'SAS',
        datetime: '7/10',
        title: '<span class="tooltip-date">Date: 7/10/2017 09:00</span><br/>Req ID: R123',
        start: new Date(2017,9,7, 9,0,0,0)
    },
    { 
        id: 2, group: 0, 
        target: 'Request',
        action: 'by',
        user: 'Alice',
        datetime: '8/10',
        title: '<span class="tooltip-date">Date: 8/10/2017 13:34</span><br/>Req ID: R123',
        start: new Date(2017,9,8, 12,30,0,0)
    }
  ]
}

Answer 1

A JAX的意思是“异步JavaScript和XML”，看来您错过了异步部分。使用“数据”变量的代码在回调外部，因此该变量不存在（或它的值未定义）。

您需要在接收到json数据后使用它，如下所示（可能需要一点清理）：

$.ajax({
    url: 'http://127.0.0.1:8887/data.json',
    dataType: "json",
    success: function(data) {
        //handle you data here


            // create visualization
            var container = document.getElementById('visualization');
            var options = {
            // option groupOrder can be a property name or a sort function
            // the sort function must compare two groups and return a value
            //     > 0 when a > b
            //     < 0 when a < b
            //       0 when a == b
            groupOrder: function (a, b) {
              return a.value - b.value;
            },
            orientation: {
                axis: 'top',
                item: 'top'
            },
            height: "85vh",
            template: template
            //timeAxis: {scale: 'day', step:3}
            };


            var timeline = new vis.Timeline(container);
            timeline.setOptions(options);
            timeline.setGroups(groups);
            timeline.setItems(data.data); 


            timeline.on('doubleClick', function (properties) {
                window.open('the_doc_url', 
                            'newwindow', 
                            'width=1000,height=600'); 
                return false;
            });
      }
});

如何通过HTML页面上的Ajax调用加载外部JSON数据？

1 个答案: