Используйте AJAX для заполнения страницы после загрузки страницы с помощью jQuery

Question

Буду признателен за любую помощь по этому вопросу.

Допустим, я хочу загрузить элементы управления для различных элементов на странице ПОСЛЕ того, как она закончила загрузку.

Итак:

Object 1
<div id="controls1" class="controls" item_id="1"></div>

Object 2
<div id="controls2" class="controls" item_id="2"></div>

Object 3
<div id="controls3" class="controls" item_id="3"></div>

Как я могу использовать jQuery для популяризации DIV с классом «элементов управления» с помощью вызова AJAX? В этом случае, я полагаю, для каждого популярного DIV придется сделать 3 ajax-вызова.

Мой ajax для захвата контента это ajax.php? Request = controls & item_id =

Спасибо!

Answer 1

Основной способ сделать это следующим образом:

$(document).ready(function() {
    $('#controls1').load('ajax.php?request=controls&item_id=1');
    $('#controls2').load('ajax.php?request=controls&item_id=2');
    $('#controls3').load('ajax.php?request=controls&item_id=3');
});

Лучше было бы динамически определить, сколько у вас есть элементов управления, и загружать их по мере необходимости ... Например:

$(document).ready(function() {
    $('.controls').each(function() {
        var theId = $(this).attr('item_id');
        $(this).load('ajax.php?request=controls&item_id=' + theId);
    });
});

Удачи!

Обновление:

Чтобы не использовать пользовательский атрибут item_id, вы можете извлечь нужный идентификатор из идентификатора элемента, используя, возможно, регулярное выражение, например ... (предупреждение, не проверено)

$(document).ready(function() {
    $('.controls').each(function() {
        var theId = $(this).attr('id');
        theId = /controls(\d+)/.exec(theId)[1];
        $(this).load('ajax.php?request=controls&item_id=' + theId);
    });
});

Answer 2

Помимо повторных вызовов $ .load (или чего-либо еще), если вы хотите сделать это при одиночном вызове ajax, здесь есть два варианта:

1 - обернуть все эти div в другой один, и пусть сервер обеспечивает весь контент в одном запросе:

$(document).ready(function() {
    $('#superDiv').load('foo.html');
});

2 - отправить клиенту объект json, содержащий идентификатор / карту содержимого

$(document).ready(function() {
    $.get('foo.php', function(json) {
        $('#controls1').html(json.controls1);
        $('#controls2').html(json.controls2);
        $('#controls3').html(json.controls3);
    },"json");
});

Answer 3

При этом будут найдены все соответствующие div class = "controls", извлечен item_id и подключен к серверу для захвата HTML.

Подробнее о загрузке AJAX здесь: http://docs.jquery.com/Ajax/load#urldatacallback

    $(document).ready(function() {
        $('.controls').each(function(i) {
            var itemId = $(this).attr('item_id');
            $(this).load('ajax.php?request=controls&item_id=' + itemId)
        });
    });

Answer 4

Использовать jQuery.load () .

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

Простые обработчики событий могут сделать ставку на автоматическое связывание себя с новым извлеченным контентом, используя jQuery.live () (в отличие от usig jQuery.bind () )

Ура! * * 1013