使用 JQuery 从本地 url 解析 JSON答案

【问题标题】：Parse JSON from local url with JQuery使用 JQuery 从本地 url 解析 JSON
【发布时间】：2011-11-05 15:06:52
【问题描述】：

我有一个本地 url，我可以在其中检索 json 文件。我还有一个使用 JQuery 构建的简单网站。

我在许多网站上查找了有关如何检索 json 输入并对其进行解析的教程和示例代码，以便我可以在我的网站上显示它。但是没有帮助，因为我仍然无法使其工作。

因此，作为最后的手段，我将向 stackoverflow 寻求帮助。我有很多 java 知识，但我对“web”开发比较陌生，并且知道一些 javascript 的基础知识。

这是我的网址的示例输出：

[
    {
        "baken": "not implemented...",
        "deviceType": "Optimus 2X",
        "batteryLevel": "1.0",
        "gps": {
            "speed": 0,
            "Date": "TueNov0100: 34: 49CET2011",
            "Accuracy": 35,
            "longitude": {removed},
            "latitude": {removed},
            "Provider": "gps"
        },
        "deviceId": "4423"
    },
    {
        "baken": "notimplemented...",
        "deviceType": "iPhone",
        "batteryLevel": "30.0",
        "gps": {
            "speed": 0,
            "Date": "TueNov0116: 18: 51CET2011",
            "Accuracy": 65,
            "longitude": {removed},
            "latitude": {removed},
            "Provider": null
        },
        "deviceId": "4426"
    }
]

希望你能帮助我..

【问题讨论】：

那么 JSON 文件是否存储在您的 Web 服务器（托管您的 jQuery 站点）上？不清楚您所说的“本地 URL”到底是什么意思。
我的意思是请求url是本地的。它是一个在本地运行并接受请求并以 json 格式发回响应的文件。
那么像“file://”网址？这可能会有一些困难，因为浏览器开始认为本地系统不可信，好像每个不同的“file://”URL 都是一个单独的域。此外，如果您的实际网站是从真实服务器（“http://”）提供的，那么您将被拒绝访问“file:”URL。

标签： javascript json jquery getjson

【解决方案1】：

如果您正在运行本地网络服务器并且网站和 json 文件由它提供服务，您可以简单地执行以下操作：

$.getJSON('path/to/json/file.json', function(data) {
  document.write(data);
})

如果您只使用文件而没有网络服务器，您可能会遇到浏览器的源策略问题，因为无法通过跨域发送 AJAX 请求，并且对于来自本地文件的请求，源域默认为“null” .

如果您使用的是 Chrome，您可以尝试使用 --allow-file-access-from-files 参数进行开发。

【讨论】：

【解决方案2】：

您的网址返回无效的 json。尝试将它粘贴到 jsonlint.com 并在那里验证它，你就会明白我的意思了。甚至在 stackoverflow 上突出显示的代码也向您展示了问题所在。 :)

编辑：要解析它，您可以使用 jQuery.parseJSON

 jQuery.parseJSON('{"foo": "goo"}');

【讨论】：

这只是一个例子，我的问题主要是关于如何解析。如果需要，您可以使用其他一些 json 输出。但无论如何，谢谢，我现在把它交给我的项目合作伙伴，他在输出部分工作:)) 编辑：我验证了我的问题中的 json 输出只是为了记录;)
在 OP =) 中更新了更好的 json。但是，您仍然可以通过让您的浮点数为数字来稍微改进它，即。 “电池电量”：30.0，而不是“30.0”。遗憾的是，jQuery 需要（默认情况下）的原生 json 有点严格，并且您不能传递 Date 构造函数。请参阅此内容以了解我对此的调查：bugs.jquery.com/ticket/8671。 Ps：如果我的回答对你有用，请随时点赞。
与其他答案不同，我认为您的挑战是解析，而不是 ajax。
我认为我没有让自己足够清楚，但这是我的错误:) 无论如何我认为我可以从这里处理它。感谢您的帮助:)

【解决方案3】：

$.get('/some.json', function(data) {
  // data[0]["baken"] == "not implemented..."
});

见http://api.jquery.com/jQuery.get/

【讨论】：

【解决方案4】：

您不需要解析 json - 这就是人们喜欢它的原因。它成为一个原生 JavaScript 对象。

对于您的示例，如果您将结果放入名为 data 的变量中，那么您可以执行以下操作：

 data[0].deviceType // would be "Optimus 2x"
 data[0].gps.speed  // would be numeric 0

等等

【讨论】：

【解决方案5】：

最自然的方法是在您进入页面后让 jQuery 为您进行 AJAX 调用。这是一个例子：

    $.ready(function() {

         // put your other code for page initialization here

         // set up a global object, for namespacing issues, to hold your JSON.
         // this allows your to be a good "web" citizen, because you will create
         // one object in the global space that will house your objects without
         // clobbering other global objects from other scripts, e.g., jQuery
         // makes the global objects '$' and 'jQuery' 
         myObjects = {};

         // start JSON retrieval here
         $.getJSON('/path/to/json/file.json', function(data) {
             // 'data' contains your JSON.
             // do things with it here in the context of this function.
             // then add it to your global object for later use.
             myObjects.myJson = data; 
         });

    });

API 文档是here

【讨论】：