从jQuery GET传递或返回JSON对象

Question

我有一个函数，它对嵌套的JSON对象发出GET请求。 该对象成功返回，但您无法访问返回对象中的其他对象。

该对象看起来像这样：

{
    "student": {
        "hobbies": ["reading", "dancing", "music"], 
        "subjects": ["english", "maths", "science"]
    }
}

这是功能：

var superObject = {

    getData: function(obj) {
        $.get(obj.target, function(callbackObject) {
            // It works fine if i log callbackObject
            // console.log(callbackObject);
            return callbackObject;
        }
    },

    useData: function() {
        var data = superObject.getData({'target': 'file.json'});
        var hobbies = data.student.hobbies;
        console.log(hobbies); // This fails and returns nothing.
    }
}

Answer 1

问题是，你回来callbackObject从$不用彷徨回调从你的，而不是getData函数。 $ .get是异步的 ，因此它的回调在getData()完成后很久才会触发。 这就是你看到未定义的原因。

怎么样的：

var superObject = {
    getReuslts: {},

    getData: function(obj) {
        $.get(obj.target, function(callbackObject) {
            getReuslts = callbackObject;
            this.useData();
        }
    },

    useData: function() {
        var hobbies = getReuslts.student.hobbies;
        console.log(hobbies); 
    }
}

当然，这会在useData和getData之间创建时间依赖关系。 为什么不在函数中创建这个对象，以便添加一些封装？

funcition getSuperObject = {
    var result = {};
    var getReuslts = {};

    function useData() {
        var hobbies = getReuslts.student.hobbies;
        console.log(hobbies); 
    }

    result.getData = function(obj) {
        $.get(obj.target, function(callbackObject) {
            getReuslts = callbackObject;
            useData();
        });
    };
    return result;
}

或者提供你自己的回调：

var superObject = {    
    getData: function(obj, callback) {
        $.get(obj.target, function(callbackObject) {
            if (callback)
                callback(calbackObject);
        });
    }
}

接着

superObject.getData({'target': 'file.json'}, function(result) {
    var hobbies = result.student.hobbies;
    console.log(hobbies); // This fails and returns nothing.
});

Answer 2

由于异步 Ajax行为，一旦通过Ajax检索的数据可用，您需要传递一个回调函数来执行; 就像是：

getData: function(obj, callback) {
    $.get(obj.target, function(callbackObject) {
        callback.call(null, callbackObject);
    }
}

useData: function() {
    superObject.getData({'target': 'file.json'}, function(data) {
        var hobbies = data.student.hobbies;
    });
}

Answer 3

$.get 异步方式工作 ：你调用它，然后浏览器就会发出请求。 同时，您的代码继续运行 。 当浏览器从服务器获取响应时，它会调用您提供的回调函数，并将结果传递给它。

这意味着当getData运行时，它将“几乎立即”返回，并且$.get启动的请求仍将在后台进行 。 因此， getData不能向调用者返回任何有意义的内容，因为它只能调度 requestl; 它无法知道结果最终会是什么。

所以你不能像这样调用getData ：

var data = superObject.getData({'target': 'file.json'}); 

你需要做的是将依赖于响应的代码放在回调中：

$.get(obj.target, function(data) {  
    var hobbies = data.student.hobbies;   
    console.log(hobbies); // This will now work
}  

Answer 4

变量的范围仅在您的函数中您可以尝试从结构中设置变量爱好，并在函数内设置它的值

var hobbies; //global scope
var superObject = { 
getData: function(obj) {
$.get(obj.target, function(callbackObject) {
    // It works fine if i log callbackObject
    // console.log(callbackObject);
    return callbackObject;
}},

useData: function() {
var data = superObject.getData({'target': 'file.json'});
 hobbies= data.student.hobbies; 
//set it's value
 }
 }

Answer 5

您将在回调处理程序中返回。 因此，您的结果将被发送到回调调度程序，从而丢弃您的结果。 您需要做的是将处理代码附加到get回调：

getData: function(obj) { return $.getJSON(obj.target); },
useData: function() {
  getData({ target : 'file.json'}).then(function(results) {
    var hobbies = results.student.hobbies;
    console.log(hobbies);

  }
}

Answer 6

您可以将异步AJAX调用转为同步。 请参阅http://api.jquery.com/jQuery.ajax/ ，主要是“async”选项。

看到这个讨论：

Ajax jquery同步回调成功