從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同步回調成功