Почему я не могу использовать результат $ .getJSON () сразу? - PullRequest
Новая
       3

Почему я не могу использовать результат $ .getJSON () сразу?

2 голосов
/ 08 марта 2012

Я пытаюсь заставить мой $ .getJSON работать, но он ничего не возвращает. Вот мой JQuery: 

$('#courseSelect').bind('change', function()
{
    data = $.getJSON('lessons.js');
    var html ='<select name="lessonSelect id="lessonSelect">';
    var len = data.length;
    alert(data.length); //this alerts "undefined"
    for (var i = 0; i< len; i++) {
        html += '<option value="' + data[i].value + '">' + data[i].name + '</option>';
    }
    html +='</select>';
    alert(html); //this alerts <select...></select> 
    //but no option tags because there's nothing to loop through
    $('lessonsDiv').html(html);
});

Это мой файл уроки .js 

   {"lessons": 
     [
          {"value": "1", "name": "Lesson 1"},
          {"value": "2", "name": "Lesson 2"},
          {"value": "3", "name": "Three"}
     ]
    }

В конечном итоге я пытаюсь создать новый список избранных уроков, когда курс выбран первым. Но сейчас я просто пытаюсь заставить этот метод getJSON работать, но это не так. Будет здорово, если кто-нибудь увидит, в чем дело. Ожидается ли другой тип данных?

Ответы [ 2 ]

7 голосов
/ 08 марта 2012

Звонок на getJSON() является асинхронным;результат не доступен сразу.Из getJSON() возвращается объект jqXHR, который отслеживает состояние асинхронного запроса.

Вам необходимо зарегистрировать обратный вызов (для этого и предназначен второй параметр), который выполняется после ответа.Объект jqXHR, который обрабатывает асинхронный запрос, автоматически выполнит ваш обратный вызов после успешного завершения запроса. 

$('#courseSelect').bind('change', function() {
    $.getJSON('lessons.js', function(data) {
        var html = '<select name="lessonSelect id="lessonSelect">';
        var len = data.length;
        alert(data.length); //this alerts "undefined"
        for (var i = 0; i < len; i++) {
            html += '<option value="' + data[i].value + '">' + data[i].name + '</option>';
        }
        html += '</select>';
        alert(html); //this alerts <select...></select> 
        //but no option tags because there's nothing to loop through
        $('lessonsDiv').html(html);
    });
});​

Как только вы это сделаете, data будет таким объектом, как; 

var data = {"lessons": 
 [
      {"value": "1", "name": "Lesson 1"},
      {"value": "2", "name": "Lesson 2"},
      {"value": "3", "name": "Three"}
 ]
};

Таким образом, вам действительно нужно использовать data.lessons для доступа к полученному массиву (и data.lessons.length для получения его длины).

2 голосов
/ 08 марта 2012

Ваш следующий код: 

data = $.getJSON('lessons.js')

не работает. AJAX не является синхронным. , как следует из названия , , асинхронный . Это означает, что вы не ждете, пока ответ не вернется. Вы указываете функцию обратного вызова, которая будет обрабатывать полученные данные.

Например: 

$.getJSON('lessons.js', handleDatas)
// This function will be executed when the datas come back
function handleDatas(data) {
    // use the `data` variable here
}

Хотя обычно он используется таким образом: 

$.getJSON('lessons.js', function(data) {
    // use the `data` variable here
}

Там мы используем анонимную функцию в качестве обратного вызова.

Для получения дополнительной информации посмотрите примеры документации по jQuery .

...