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

Posted 2023-02-27

【中文标题】如何在没有 jQuery 的情况下在 JavaScript 中打开 JSON 文件？

【英文标题】：How can I open a JSON file in JavaScript without jQuery?

【发布时间】：2012-04-07 23:45:49

【问题描述】：

我正在用 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>');
 

【问题讨论】：

我理解“读取 json 文件”是指向返回 json 内容的 url 发出请求。如果是这样，那么您能解释一下为什么不想为此使用 jQuery 吗？它有 $.ajax 功能，非常适合这个。

嘿 Michal，这就是我想做的。为什么我不想使用 jQuery 是因为我为之工作的人不想要它，因为他害怕脚本的速度。不是我的要求

@TobyJustus：正确的分析会告诉你 jQuery 在 getJSON 方面并不慢；他所做的只是让自己对自己苛刻，几乎一无所获。事实上，Stroustrup 就本机代码如何比为您创建的库更慢做了一个很好的演讲......

说服他使用 jQuery 和 $.getJSON。这将为您节省很多麻烦和时间！

【参考方案1】：

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.

【讨论】：

但我如何将外部文件存储到该 var myJSON？我是一个真正的新手:)

@Toby 创建另一个文件，并在使用它的其他代码之前使用<script> 标记将其包含到您的页面中。

@JamWaffles 呵呵：-P

@JamWaffles：那个和这个答案是对 JSON 的最不当使用，欢迎来到开销世界！

@TobyJustus：这里有一个很好的例子，说明了如何引入 jQuery 所没有的开销，因此最终会得到一个较慢的解决方案。很多人都在使用 jQuery，因为它是一个快速的库，你为什么不呢？

【参考方案2】：

XHR 可以用来打开文件，但是你基本上是在让自己变得困难，因为 jQuery 让你更容易做到这一点。 $.getJSON() 让这一切变得如此简单。我宁愿只调用一行而不是试图让整个代码块工作，但这取决于你......

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

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

害怕意味着他不知道自己在做什么。如果你打算追求性能，你实际上需要知道如何让某些代码变得更快。如果你只是认为 jQuery 很慢，那你就走错了路……

【讨论】：

也许他在谈论避免获取 jquery 的 cdn 副本、获取 json 文件然后解析它所需的 100 毫秒？我宁愿并行获取json文件和jquery。

@MarkDuiker：嗯，不，如果我要给你另一个引用 ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 脚本的网站，那么从你的缓存中读取它只需要大约 3 毫秒，因为你目前正在阅读一个网站指的是相同的脚本，并且您可能在过去几天也访问过很多其他引用它的网站。这是 CDN 目的的一部分...... ;-)

@Tom Wijsman 晚了几年但是......因为有像 Adob​​e 这样的程序允许为他们的应用程序编写脚本，并且只能使用 javascript。这是你不能使用 jquery 的一种情况。

【参考方案3】：

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

如果您想读取文件，则必须在服务器端进行，例如php 并以某种方式将其提供给 dom（有不同的方法），以便 js 可以使用它。 无法使用 js 从磁盘读取文件。

【参考方案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); 
);

【讨论】：

我想你忘记了“error”作为方法的第三个参数。感谢您提供的示例，我将使用它。

@DennisS，感谢您指出这一点。我将修复代码示例。

为什么最后一行需要xhr.send()？

@ayjay，send() 函数实际上发送了请求，可以选择为正文发送任何内容（取决于 HTTP 方法。）

如何从中获得data 值？