Javascript:can't从localhost加载JSON文件

Javascript: can't load JSON file from localhost

本文关键字：localhost 加载 JSON 文件 can Javascript      更新时间：2023-09-26

我目前正在阅读《Head first HTML5编程》一书。我想从我自己机器上的web服务器加载名为sales.json的文件的内容。我使用了wampserver。

在文件夹wamp/www/gumball/中，我放置了所有相关的.html、.js和.css文件，以及sales.json文件。

我的JavaScript代码非常简单：

window.onload = function() {
    var url = "http://localhost/gumball/sales.json";
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            updateSales(request.responseText);
        }
    };
    request.send(null);
}
function updateSales(responseText) {
    var salesDiv = document.getElementById("sales");
    salesDiv.innerHTML = responseText;
}

这没有任何作用！在我的浏览器中键入链接：http://localhost/gumball/sales.json会打开正确的文件，因此链接应该是正确的。即使使用本书附带的.js文件（以及我正在尝试制作的应用程序的完成版本），也不会加载任何内容。

使用警报语句进行测试告诉我request.onload事件从未发生过。我不知道为什么会这样。

我还不太明白的一个事实是：当我在浏览器中键入：http://localhost/gumball/sales.json:（我在链接的末尾添加了一个冒号）时，我得到了一个403 Forbidden错误！为什么会发生这种情况？这和我的问题有关吗？

我用firefox 打开html文档

如果您希望HTML文档能够以javascript打开另一个文档，则必须使用http://而不是file://中的URL打开该文档，除非第二个文档带有相关的CORS标头。

这是由于同源政策。

由于您有一个本地WAMP服务器，所以没有问题：只需使用http:// URL打开文件，就像打开JSON文件一样。

相关文章：