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

Мне нужно создать страницу, которая будет загружать divs с внешней страницы с помощью JQuery и AJAX.

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

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

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

Главная страница содержит постоянный список, содержащий ссылки, содержащие параметр.
По щелчку, ссылка передает параметр на внешнюю страницу.
Внешние фильтры страниц записывают по параметру и заполняют div результатами.
Новый div содержит новый набор ссылок с новыми параметрами.
Внешний div загружается под главными страницами первого div.
Затем процесс можно повторить, создавая цепочку divs друг под другом.
Последний 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.
В настоящее время я могу сделать это только со статическими ссылками (как указано выше).

Я не уверен, что вы уже решили это, но я удивлен, что никто не упомянул использовать функцию 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(){ } }); }

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

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

 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 для оценки и т. Д. … это зависит от задачи. Пример упрощен, поэтому расширьте его в соответствии с вашими потребностями.

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

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

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

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

будет загружать "external.php? param = 1 & otherParam = 2"