Помимо проблемы конкатенации, проблема в том, что каждый обратный вызов имеет ссылку на один и тот же i, и в момент выполнения обратных вызовов цикл завершается.Все элементы будут иметь идентификатор 11.
. Вы можете подумать, что каждая итерация ожидает возврата вызова Ajax, но это не так.Ajax - это асинхронный , «окружающий» код не ожидает завершения вызовов Ajax (вот почему вы должны передать обратный вызов).
Другая проблема заключается в том, что JavaScript не имеет блокаобъем.Вы можете создать новую область и "захватить" значение i, вызывающего функцию.Вот пример с немедленной (или самодействующей ) функцией:
while(i<=10) {
(function(index) {
$.ajax({
url: "tabelle.html",
success: function(data) {
$('<p />', {id: 'prefix' + index, html: data})
.appendTo('#divId');
},
error: function(){
alert('nein!');
}
});
}(i++));
}
Другим решением было бы поместить вызов Ajax в именованную функцию ивызовите его из цикла (передавая текущий индекс):
while(i<=10) {
makeAjaxCall(i++);
}
В вашем особом случае вам даже не нужно делать Ajax-запрос в цикле.Вы не отправляете какие-либо параметры на сервер.В этом случае вы можете выполнить итерацию в обратном вызове успеха:
$.ajax({
url: "tabelle.html",
success: function(data) {
var $p = $("<p />", {html: data}),
$div = $('#divId');
i = 1; //?
while(i<=10) {
$div.append($p.clone().attr('id', 'prefix' + i);
}
},
error: function(){
alert('nein!');
}
});
Хорошо сделать как можно меньше запросов.Другой вариант - отправить структурированные данные в качестве ответа (например, JSON [Wikipedia] ), проанализировать и обработать их соответствующим образом.
Учтите:
В HTML4 идентификаторы не могут начинаться с цифр.Хотя он, скорее всего, будет работать во всех браузерах, лучше использовать префикс ID с символами (хотя он действителен в HTML5).
$('div') выберет все divна странице.Это не кажется проблемой в вашем конкретном примере, но если ваша структура становится более сложной, убедитесь, что вы добавляете новый элемент только к одному элементу (иначе у вас будет несколько элементов с одинаковым идентификатором.
Завершающие запятые в литералах объекта вызывают проблемы в IE.
У вас могут возникнуть проблемы с одновременным выполнением стольких запросов. Вы мог делать запросы один за другим, используя Deferred объектов jQuery .