使用JQuery从本地URL解析JSON

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

我已经查找了许多网站上的教程和示例代码,了解如何检索json输入并解析它,以便我可以在我的网站上显示它。 然而非有用,因为我仍然无法使其工作。

所以作为最后的手段,我将要求s​​tackoverflow提供帮助。 我有很多java知识,但我对’web’开发相对较新,并且了解一些javascript的基础知识。

这是我的url的示例输出:

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

希望你能帮我..

如果您正在运行本地Web服务器并且网站和json文件由它提供服务,您可以执行以下操作:

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

如果您只是使用文件而没有使用网络服务器,则可能会出现浏览器的origin-policy问题,因为无法通过跨域发送AJAX请求,并且默认情况下源域为“null”,来自本地文件的请求。

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

您的URL返回无效的json。 尝试在jsonlint.com中粘贴它并在那里validation它,你会明白我的意思。 甚至在stackoverflow上突出显示的代码也向您显示错误。 🙂

编辑:要解析它,您可以使用jQuery.parseJSON

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

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

你不需要解析json – 这就是人们喜欢它的原因。 它成为本机JavaScript对象。

对于您的示例,如果您将结果放在一个名为data的变量中,那么您可以执行以下操作:

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

等等

最自然的方法是允许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, eg, 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文档在这里