Javascript Ajax在Webix中不起作用_Javascript_Jquery_Json_Ajax_Webix

Javascript Ajax在Webix中不起作用

javascript jquery json ajax

Javascript Ajax在Webix中不起作用,javascript,jquery,json,ajax,webix,Javascript,Jquery,Json,Ajax,Webix,我正在尝试我的第一个webix程序。我遵循get start文档。根据文档，我将代码放在HTML页面和两个json文件中。这是我的完整代码 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="../webix_v4.2.4_pro/codebase/webix.css" type="text/css"> <script src="../webix_v4.2.4_pro

我正在尝试我的第一个webix程序。我遵循get start文档。根据文档，我将代码放在HTML页面和两个json文件中。这是我的完整代码

<!DOCTYPE HTML>
<html>

<head>
  <link rel="stylesheet" href="../webix_v4.2.4_pro/codebase/webix.css" type="text/css">
  <script src="../webix_v4.2.4_pro/codebase/webix.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    #app_here {
      width: 1000px;
      height: 400px, margin: 200px;
    }
  </style>
</head>

<body>
  <div id="app_here"></div>

  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $.ajax({
        url: "grid_data.json",
        success: function(result) {
          debugger;
        }
      });
    });
    $(document).ready(function() {
      $.ajax({
        url: "tree_data.json",
        success: function(result) {
          debugger;
        }
      });
    });

    webix.ready(function() {
      webix.ui({
        container: "app_here",
        view: "layout",
        rows: [{
          type: "header",
          template: "My App!"
        }, {
          cols: [{
            view: "tree",
            id: "mytree",
            gravity: 0.3,
            select: true,
            data: tree_data
          }, {
            view: "resizer"
          }, {
            view: "datatable",
            id: "mydatatable",
            autoConfig: true,
            data: grid_data
          }]
        }]
      });
      $$("mytree").open(1);
      $$("mytree").open(2);
      $$("mydatatable").select(1);
    });
  </script>

</body>

</html>

My grid_data.json

[
  { id: "1", 
    type: "folder", 
    value: "Music", 
    css:"folder_music", 
    data:[{
            id : 6,
            type: "folder", 
            value: "Music", 
        },{
            id : 3,
            type: "folder", 
            value: "Music", 
        },{
            id : 4,
            type: "folder", 
            value: "Music", 
        },{
            id : 5,
            type: "folder", 
            value: "Music", 
        }]
 },{ id: "2", 
    type: "folder", 
    value: "Music", 
    css:"folder_music", 
    data:[{
            id : 7,
            type: "folder", 
            value: "Music", 
        },{
            id : 8,
            type: "folder", 
            value: "Music", 
        },{
            id : 9,
            type: "folder", 
            value: "Music", 
        },{
            id : 10,
            type: "folder", 
            value: "Music", 
        }]
 }
]

[
  { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
  { id:2, title:"The Godfather", year:1994, votes:678790, rating:9.2, rank:1},
  { id:3, title:"The Godfather part : 2", year:1994, votes:678790, rating:9.2, rank:1},
  { id:4, title:"The good, the bad and the Ugly ", year:1994, votes:678790, rating:9.2, rank:1},
  { id:5, title:"My Fair Lady", year:1994, votes:678790, rating:9.2, rank:1},
  { id:6, title:"12 Angery Man", year:1994, votes:678790, rating:9.2, rank:1}
]

我假设

tree\u data

是您试图通过

ajax

请求获取的

json

数据。您需要返回数据或将其存储在某处以供以后使用。在您拥有的代码中，您没有定义

tree\u data

或

grid\u data

。尝试获取与操作类似的数据：


var gridData=（函数（）{
var网格数据；
$.ajax({
url:“grid_data.json”，
成功：功能（结果）{
网格数据=结果；
控制台日志（网格数据）；
}
});
返回{
getData:function（）{
if（grid_数据）返回grid_数据；
}
}
})();
var treeData=（函数（）{
var-tree_数据；
$.ajax({
url:“tree_data.json”，
成功：功能（结果）{
树_数据=结果；
console.log（树_数据）；
}
});
返回{
getData:function（）{
if（tree\u data）返回tree\u数据；
}
}
})();
webix.ready（函数（）{
webix.ui({
容器：“app_here”，
视图：“布局”，
行：[{
类型：“标题”，
模板：“我的应用！”
}, {
科尔斯：[{
视图：“树”，
id:“mytree”，
重力：0.3，
选择：true，
data:treeData.getData（）//获取树数据
}, {
视图：“调整器”
}, {
视图：“数据表”，
id:“mydatatable”，
自动配置：正确，
data:gridData.getData（）//获取网格数据
}]
}]
});
$$（“mytree”）。打开（1）；
$$（“mytree”）。打开（2）；
$$（“mydatatable”）。选择（1）；
});

@Jonthan当我在网络中检查时，这些在ajax中传递的url并没有加载。因此，我得到了类似“Uncaught TypeError:treeData.getData不是一个函数”的错误@shankysingh我更新了代码，我在上一个代码中有一些输入错误，但是到您的

树\u data.json的路径是什么？非常感谢。现在url正在ajax中获取。网格没有加载，但我会检查是什么原因导致的。我会接受这个在某个时候。不知道由于某种原因数据没有加载。谢谢你。我知道这些都是愚蠢的错误，但我要确保我从这些错误中恢复过来。谢谢工作