javascript - 将文件中的json加载到对象中

Question

努力将 URL 上的文件 (myData.json) 中的 json 加载到对象中，以便我可以访问属性值。

-- 数据立即加载，我在应用程序中非常需要它。

-- 我将在整个应用程序中访问数据，而不仅仅是作为数据加载后立即发生的一个功能的一部分。

-- 我已确保文件中的数据格式正确，为 json。

按照 jquery API 上的示例，我不应该能够做一些简单的事情吗:

警报(jqxhr.myProperty);

并获取值？ 我在这里错过了什么步骤？我试过运行 eval 和各种类似的东西

var myObj=JSON.parse(jqxhr);

没用。

请......谢谢。

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON("example.json", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });

// perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function(){ alert("second complete"); });

Answer 1

我觉得你把事情搞得太复杂了:)

 var JSON;

 $.getJSON('example.json', function(response){
       JSON = response;
       alert(JSON.property);
 })
 //feel free to use chained handlers, or even make custom events out of them!
 .success(function() { alert("second success"); })
 .error(function() { alert("error"); })
 .complete(function() { alert("complete"); });

getJSON 函数会自动将您的响应转换为适当的 JSON 对象。无需解析。

您提到您到处都在使用这些数据，因此您必须等待 ajax 调用完成才能访问数据。这意味着要么将整个应用程序包装在 getJSON 回调中。或者使用自定义事件来确定:

 var JSON;

 $(window).on('JSONready', function(){
       alert(JSON.property);
 });

 $.getJSON('example.json', function(response){
       JSON = response;
       $(window).trigger('JSONready');
 });

 $('#elem').on('click', function(){
       //event likely to take place after ajax call has transpired
       //it would still be better to assign this listener in a callback, 
       //but you can get away with not doing it, if you put in a catch
       if(JSON){
           alert(JSON.property);
       }          
 });

编辑

经过快速实时调试，数据不可用的真正原因是:使用 JSON 的 javascript 位于文件中，包括执行调用的内联 javascript 的页面文档 NORTH。因此 JSON 不是全局变量，范围阻止了它的使用。如果您确实需要一个全局变量，以便它可以与内联 JS 以及任何和所有包含的 js 文件一起使用，您可以这样做:

  (function(){
      var limitedScopeVariable = 25;
      window.globalScopeVariable = 30;
  })();

  $(function(){
       alert(globalScopeVariable); //works!
       alert(limitedScopeVariable); //fails!
  });

编辑 2

As of jQuery 3.0, callback functions are different: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead

来自@mario-lurig 的评论