AJAX - загрузить все элементы div

Question

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

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

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

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

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

Answer 1

С jQuery:

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

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

Что-то вроде (не проверено!):

$(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);
       });
    });
});

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, вам просто нужно установить 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 получает один и тот же текст. Если вы хотите, чтобы он основывался на идентификаторе или классе, вам наверняка понадобится jquery.

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