关于javascript文件中相对的问题

Question

我有这样的文件结构：

只是为了演示，请忽略其他问题。就像尝试从html访问json文件一样。

假设我想从js / test.html和js / widget.js访问data / employees.json文件

如您所见，test.html和widget.js都在同一个文件夹中。

我在index.html文件中链接了widget.js

<script src="js/widget.js"></script>

正如我一直以为，如果我想从js文件夹中的文件访问data / employees.json，我使用相对路径，在本例中，对于widget.js，我写道：

$(document).ready(function () {
  console.log(window.location);
  $.getJSON('../data/employees.json', function (data) {
    //some code here
  }); // end getJSON
}); // end ready

对于test.html，我写了这个：

<link rel="stylesheet" type="text/css" href="../data/employees.json">

控制台没有给我test.html的错误，但是widget.js中的代码有404错误。

所以我的问题是，现在我在widget.js文件中，我想访问employees.json文件。如果widget.js链接到根文件夹中的index.html，我应该使用的正确相对路径是什么？为什么呢？

在我看来，widget.js和test.html处于同一级别，应该为employees.json使用相同的路径，即“../ data / employees.json”

感谢。

Answer 1

employees.js的正确路径取决于要加载它的页面的路径，而不是执行加载的脚本的路径。从index.html文件中，employees.js的路径是＆＃34; data / employees.js＆＃34;。从test.html开始，路径为＆＃34; ../ data / employees.js＆＃34;。

您需要一些方法来确定您在网站结构中的位置并提出正确的请求。

最简单的方法是将这些文件存储在一个众所周知的位置，然后使用绝对URL - 即＆＃34; /data/employees.js"。然后，无论您在何处尝试加载，路径始终从站点的根目录开始。

Answer 2

尝试：

$.getJSON('/../data/employees.json', function (data) {

相对URL相对于包含引用的页面目录进行解释。

或者：

jQuery.getJSON('//www.domain.com/whatever/theJson.json', function(data){