Javascript 在本地项目中加载json文件而不使用webserver

我尝试从我的本地项目加载一个json文件，该项目没有在Web服务器上运行

test.json

[{
    name : "Google",
    url : "https://www.google.com",
},
{
    name : "Bing",
    url : "https://www.bing.com",                            
}]

第一次尝试：

首先，我尝试使用项目文件夹中的本地文件

loadJSON("data/test.json", function(response) {

    console.log(JSON.parse(response));
});

function loadJSON(path, callback) {   

var xobj = new XMLHttpRequest();

    xobj.overrideMimeType("application/json");
    xobj.open('GET', path, true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

响应：

index.html:616未能加载 file:///C:/wamp64/www/projects/Startseite/data/test.json: 交叉起源 请求仅支持协议方案：http、数据、chrome、， chrome扩展，https

然后我研究了错误，设置了一个虚拟主机，并将调用更改为：

loadJSON("http://ressources/data/test.json", function(response) {

    console.log(JSON.parse(response));
});

响应：

未能加载：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。因此，不允许访问源“null”

---

甚至可以在不使用Web服务器或不安装浏览器插件的情况下加载json吗？

在浏览器上运行javascript时，我认为在没有Web服务器的情况下从文件系统访问文件是不可能的。如果您只是想使用javascript处理这些文件，那么可以通过在您的机器上使用node运行javascript来实现。否则，我不知道还有其他方法，但您可能想看看：

---

你不能那样做。如果不能添加web服务器，一个选项是将JSON数据移动到单独的.js文件中。由于JSON文件如下所示：

    [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
{
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

[{
名称：“客户支持OTR”，
url:“https://support.hecht-international.com",
描述：“客户支持OTR

呼叫代理
在线”，
img：“img/otrs_thumb.PNG”，
},
{
名称：“hechtAbasConverter”，
url:“https://hac.hecht-international.com/gui/login.php",
描述：“hechtAbasConverter-hac

在线”，
img：“img/easylife/hac.png”，
}]

将其移动到jsondata.js

var jsonData = [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
    {
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

var jsonData=[{
名称：“客户支持OTR”，
url:“https://support.hecht-international.com",
描述：“客户支持OTR

呼叫代理
在线”，
img：“img/otrs_thumb.PNG”，
},
{
名称：“hechtAbasConverter”，
url:“https://hac.hecht-international.com/gui/login.php",
描述：“hechtAbasConverter-hac

在线”，
img：“img/easylife/hac.png”，
}]

并以HTML格式加载新文件

<script type="text/javascript" src="path/to/jsondata.js"></script>

---

至于JSON，您可以使用JSONP，它是为跨域和每个url（绝对或相对）设计的

及

test.html

<script>
    function jsonp(data){
      console.log(data)
    }
</script>
<script src="test.js"></script>

---

这似乎只适用于Web服务器。@Black这不是必需的，请参阅修改后的答案，我已经测试过了。但这是一个javascript文件，不是json文件。现在如何向json对象添加新对象？@Black文件的命名无关紧要。只需生成所需的任何javascript数组。而不是围绕函数调用。这就是jsonp。我在这里，我不能再为你提供什么了。也许它不适合您的需要，但这是在没有Web服务器的情况下实现这一点的唯一方法。

jsonp([{
  name : "Google",
  url : "https://www.google.com",
},
  {
    name : "Bing",
    url : "https://www.bing.com",
  }])