如何在没有 jQuery 的情况下在 JavaScript 中打开 JSON 文件?

IT技术 javascript json xmlhttprequest
2021-02-23 08:06:47

我正在用 JavaScript 编写一些代码。在这段代码中,我想读取一个 json 文件。该文件将从 URL 加载。

如何在 JavaScript 中的对象中获取此 JSON 文件的包含内容?

这是例如我的 JSON 文件位于../json/main.json

{"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]}

我想像这样在我的table.js文件中使用它

for (var i in mainStore)
{       
    document.write('<tr class="columnHeaders">');
    document.write('<td >'+ mainStore[i]['vehicle'] + '</td>');
    document.write('<td >'+ mainStore[i]['description'] + '</td>');
    document.write('</tr>');
} 
4个回答

这是一个不需要 jQuery 的示例:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

称之为:

loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);
@DennisS,感谢您指出这一点。我会修复代码示例。
2021-04-21 08:06:47
我认为您忘记了“错误”作为该方法的第三个参数。谢谢你的例子,我会使用它。
2021-04-22 08:06:47
@ayjay,send()函数实际上发送请求,可以选择包含正文的任何​​内容(取决于 HTTP 方法)。
2021-04-27 08:06:47
我如何从中获得datavalue?
2021-05-05 08:06:47
为什么xhr.send()需要在最后一行?
2021-05-13 08:06:47

XHR可用于打开文件,但您基本上是在使自己变得困难,因为 jQuery 使这对您来说更容易。$.getJSON()使这很容易做到。我宁愿调用一行,也不愿尝试让整个代码块工作,但这取决于你......

为什么我不想使用 jQuery 是因为我为之工作的人不想要它,因为他害怕脚本的速度。

如果他不能正确地分析原生 VS jQuery,他甚至不应该编写原生代码。

害怕意味着他不知道自己在做什么。如果您打算追求性能,您实际上需要知道如何使某些代码片段更快。如果你只是认为 jQuery 很慢,那么你就走上了错误的道路......

@Tom Wijsman 晚了几年但是......因为有像 Adob​​e 这样的程序允许为他们的应用程序编写脚本,并且只能使用 javascript。这是您无法使用 jquery 的一种情况。
2021-04-18 08:06:47
也许他在谈论避免获取 jquery 的 cdn 副本、获取 json 文件然后解析它所需的 100 毫秒?我宁愿并行获取 json 文件和 jquery。
2021-05-03 08:06:47
@MarkDuiker:嗯,不,如果我给你另一个引用ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js脚本的网站,它只需要大约 3毫秒就可以读取它您的缓存,因为您当前正在阅读一个引用相同脚本的网站,并且在过去的几天里,您可能还访问了很多其他引用它的网站。这是 CDN 目的的一部分... ;-)
2021-05-04 08:06:47

我知道“读取 json 文件”是指向返回 json 内容的 url 发出请求。如果是这样,那么您能解释一下为什么您不想为此使用 jQuery 吗?它具有 $.ajax 功能,非常适合此功能并涵盖浏览器的差异。

如果你想读取文件,那么你必须在服务器端进行,例如 php 并以某种方式将它提供给 dom(有不同的方法),以便 js 可以使用它。无法使用 js 从磁盘读取文件。

JSON与 jQuery无关

没有什么错,你现在有代码。


要存储变量mainStore,它是该 json 中的一个变量。

您应该将该 json 存储到一个变量中:

var myJSON = {"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]};

var mainStore = myJSON.mainStore;

//.. rest of your code.
@Toby 创建另一个文件并<script>在使用它的其他代码之前使用标签将其包含到您的页面中
2021-04-16 08:06:47
@TobyJustus:这里有一个很好的例子,说明如何引入 jQuery 没有的开销,因此最终得到了较慢的解决方案。很多人都在使用 jQuery,因为它是一个快速的库,你为什么不呢?
2021-04-23 08:06:47
@JamWaffles 呵呵 :-P
2021-04-29 08:06:47
@JamWaffles:那个和这个答案是对 JSON 最不正确的使用,欢迎来到开销世界!
2021-05-01 08:06:47
但是如何将外部文件存储到该 var myJSON 中?我是一个真正的新手:)
2021-05-02 08:06:47