Javascript 如何通过html页面上的ajax调用加载外部JSON数据？_Javascript_Json_Ajax

Javascript 如何通过html页面上的ajax调用加载外部JSON数据？

javascript json ajax

Javascript 如何通过html页面上的ajax调用加载外部JSON数据？,javascript,json,ajax,Javascript,Json,Ajax,我在下面创建了一个伪JSON文件来测试这个html页面是否工作。如何通过ajax请求加载数据？我唯一的错误是未捕获引用错误：未定义数据如何在html页面中调用此JSON文件？我一直在努力，但没有结果。如果有用的话，我从你那里得到这个 index.html <!DOCTYPE HTML> <html> <head> <title>Matter Timeline</title> <link rel="stylesheet"

我在下面创建了一个伪JSON文件来测试这个html页面是否工作。如何通过ajax请求加载数据？我唯一的错误是

未捕获引用错误：未定义数据

如何在html页面中调用此JSON文件？我一直在努力，但没有结果。如果有用的话，我从你那里得到这个

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>


物质时间线
{{target}}
{{status_green}}
{{status_red}}


{{action}}
{{user}}

{{datetime}}
函数resettimeline（）{
document.location.reload（）；
};

物质时间线

变量组=新的vis.DataSet([
{id:0，内容：'Process/Task'，值：1}，
{id:1，内容：'Req/Matter/Doc'，值：2}
]);
var source=document.getElementById（'item-template'）.innerHTML；
var template=handlebar.compile（document.getElementById（'item-template'）.innerHTML）；
$.ajax({
网址：'http://127.0.0.1:8887/data.json',
数据类型：“json”，
成功：功能（数据）{
//在这里处理您的数据
}
});
//创建可视化
var container=document.getElementById（'visualization'）；
变量选项={
//选项groupOrder可以是属性名或排序函数
//排序函数必须比较两个组并返回一个值
//当a>b时>0
//当a

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)
    }
  ]
}

{
“数据”：[
{ 
id:1，组：0，
目标：“请求”，
行动：'从'，
用户：“SAS”，
日期时间：“7/10”，
标题：“日期：2017年10月7日09:00
请求ID:R123”，
开始日期：新日期（2017,9,7,9,0,0）
},
{ 
id:2，组：0，
目标：“请求”，
行动:"由",，
用户：“Alice”，
日期时间：“8/10”，
标题：“日期：2017年10月8日13:34
请求ID:R123”，
开始日期：新日期（2017,9,8,12,30,0,0）
}
]
}

AJAX的意思是“异步JavaScript和XML”，您似乎错过了异步部分。使用“data”变量的代码在回调之外，则该变量不存在（或其值未定义）

您需要在接收json数据后使用它，类似这样（可能需要清理一点）：

$.ajax({
网址：'http://127.0.0.1:8887/data.json',
数据类型：“json”，
成功：功能（数据）{
//在这里处理您的数据
//创建可视化
var container=document.getElementById（'visualization'）；
变量选项={
//选项groupOrder可以是属性名或排序函数
//排序函数必须比较两个组并返回一个值
//当a>b时>0
//当a

您使用的是什么Web服务器？

data.json

需要由Web服务器提供服务。我使用的是用于Chrome的Web服务器。您似乎没有对数据做任何处理。看到$.ajax函数中的成功部分了吗？它接收数据对象，但您没有使用它。稍后您将尝试使用变量数据，但尚未声明变量数据。尝试复制整个可视化代码并将其粘贴到$.ajax函数成功部分的函数中，看看发生了什么。记住，由于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;
            });
      }
});