AJAX - загрузка всех элементов Div

Question

У меня есть веб-страницы с несколькими Div элементов, таких, как этот:

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA'> 
</div> 

Я хотел бы, чтобы каждый Div элемент для вызова яваскрипта функцию, когда он загружен, чтобы заполнить div. В идеале я бы хотел (а)

<div id='ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA' 
    onload=getcontent('ahFyb2JpdGFpbGxlc2FuZGJveHIKCxIA');> 
</div> 

но, конечно же, для элементов div не допускаются нагрузки. Есть ли способ сделать это? Я читал в ряде мест, которые jQuery может помочь в этом, но я не могу понять, как его кодировать. Любая помощь будет очень высоко ценится!

Answer 1

Чтобы сделать это без jquery, вам просто нужно установить onload для окна и сообщить ему, что делать с каждым div. Но jquery делает это намного проще.

Так без:

window.document.onload = function() { 
     var divs = document.getElementsByTagName("div"); 
      for(var i = 0; i < divs.length; i++) 
       divs[i].text("blah blah blah"); 
      } 
    }; 

Это может быть innerHTML. Я должен был бы дважды проверить. Но это суть. С jQuery:

$(function(){ 
      $("div").text("blah blah blah"); 
    }; 

Это, конечно, предполагает, что каждый div получает тот же текст. Если вы хотите, чтобы он был основан на ID или классе, вам наверняка нужен jquery.

PS - Большинство веб-страниц стараются избегать размещения обработчиков событий javascript в реальном HTML. Если вы настроили обработчики событий при загрузке, нет необходимости, а код - более чистый. JQuery определенно помогает в этом.

Answer 2

Если вы основываете содержание на идентификатору DIV, небольшая модификация кода Энтони должен работать

document.onload = function() { 
      var divs = document.getElementsByTagName("div"); 
      for(var i = 0; i<divs.length;i++){ 
       divs[i].innerHTML = getContent(divs[i].id); 
      } 

Answer 3

Я хотел бы назначить класс для Div-х годов, которые вы хотите «Автозагрузка» свои собственные содержание. Это делает разметку более четкой, а JavaScript более кратким.

$(function() { 
    $('.autoload').each(function() { 
     // Use AJAX 
     $.get("service.php", {id: this.id} function(response) { 
      // Handle server response here 
     }); 

     // Or a local data island 
     this.innerHTML = getDataById(this.id); 
    }); 
}); 

Answer 4

С JQuery:

Вы должны рассмотреть возможность использования $ .load() для извлечения содержимого HTML. Это немного проще в использовании, чем $ .get(). Altho будет использовать семантику POST, если вы предоставите параметры ...

В любом случае, вы действительно хотите сделать отдельные обратные вызовы на сервер за каждый div? .. Возможно, вам стоит рассмотреть один вызов, который отправляет накопленный набор ожидающего содержимого div id в вашу функцию веб-сервиса, а затем возвращает структуру json, через которую вы можете пройти через успех, заполняя divs всего за один снимок.

Нечто подобное (не проверенная!):

$(function() { 
    var ids = []; 
    $('div.autoload').each() { function() { ids.push($(this).attr('id')); }); 
    $.get('service.php', {ids: ids}, function (response) { 
     $.each(response.perdiv, function (i, c) { 
      $('div#' + c.id).html(c.html); 
     }); 
    }); 
});