JQuery / AJAX: загрузка внешних DIV с использованием динамического контента

Question

Мне нужно создать страницу, которая будет загружать div с внешней страницы, используя Jquery и AJAX.

Я наткнулся на несколько хороших руководств, но все они основаны на статическом контенте, мои ссылки и контент генерируются PHP.

Основное руководство, на котором я основываю свой код, написано с:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

Точная функция, которая мне нужна, выглядит следующим образом:

1. Главная страница содержит постоянный раздел с перечислением некоторых ссылок, содержащих параметр.
2. При нажатии ссылка передает параметр на внешнюю страницу.
3. Внешняя страница фильтрует набор записей по параметру и заполняет div результатами.
4. Новый div содержит новый набор ссылок с новыми параметрами.
5. Внешний div загружается под главные страницы первого div.
6. Затем процесс может быть повторен, создавая цепочку div друг под другом.
7. Последний div в цепочке будет затем направлять на новую страницу, сопоставляя все ранее использованные строки запросов.

Я могу справиться со всей работой PHP, заполнив div на главной и внешней страницах.
Это часть JQuery и AJAX, с которой я борюсь.

$(document).ready(function(){
    var sections = $('a[id^=link_]'); // Link that passes parameter to external page
    var content = $('div[id^=content_]'); // Where external div is loaded to

    sections.click(function(){ 
        //load selected section
        switch(this.id){
            case "div01":
                content.load("external.php?param=1 #section_div01");
                break;
            case "div02":
                content.load("external.php?param=2 #section_div02");
                break;          
        }
});

Проблема, с которой я столкнулся, заключается в том, чтобы заставить JQuery передавать динамически сгенерированные параметры на внешнюю страницу и затем получать новый div.
В настоящее время я могу делать это только со статическими ссылками (как указано выше).

Answer 1

Я не уверен, что вы уже решили это, но я удивлен, что никто не упоминал об использовании функции ajax ().

Это позволит вам определить тип запроса как GET:

function loadContent(id) {

    $.ajax({
        type: "GET",
        url: "external.php",
        dataType: 'html',
        data: {param: id},

        success: function(html){
                 $("#container").html(html);
        },

        error: function(){
        },

        complete: function(){
        }
    });

}

Просто вызовите эту функцию вместо использования load. Очевидно, вам придется немного повозиться с кодом (в основном с функцией успеха), но это должно дать вам хорошую отправную точку.

Answer 2

Вы можете использовать необязательный аргумент data для передачи параметров в запрос GET. Прочитайте документацию . Это гораздо лучше, чем создавать URL самостоятельно. Конечно, вы можете добавить динамически сгенерированные данные в список параметров.

Answer 3

Этот урок по загрузке содержимого AJAX хорош:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Особенно часть, объясняющая, как читать результаты с Firebug.

Answer 4

function loadDiv(evt)
{
    // these params will be accessible in php-script as $_POST['varname'];
    var params = {name:'myDiv', var1:123, var2:'qwer'};
    $.post('http://host/divscript.php', params, onLoadDiv);
}
function onLoadDiv(data)
{
   $('#myContainer').html(data);
}
$(document).ready(function() { 
    $('#divButton').click(loadDiv); 
});

В этом примере серверный скрипт должен возвращать внутреннее содержимое вашего div. Конечно, вы можете вернуть XML-сериализованные данные или JS в eval и т. Д. ... это зависит от задачи. Пример упрощен, поэтому расширьте его, чтобы он соответствовал вашим потребностям.

Answer 5

var params = {
    param: 1,
    otherParam: 2
};
content.load("external.php #section_div01", params);

загрузит "external.php? Param = 1 & otherParam = 2"