JQuery / AJAX:使用动态内容加载外部DIV

我需要创建一个页面,使用Jquery和AJAX从外部页面加载div。

我遇到了一些很好的教程,但它们都基于静态内容,我的链接和内容都是由PHP生成的。

我基于代码的主要教程来自:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

我需要的确切function如下:

  1. 主页面包含一个永久div,列出了一些包含参数的链接。
  2. 点击后,链接将参数传递给外部页面。
  3. 外部页面根据参数过滤记录集,并使用结果填充div。
  4. 新div包含一组带有新参数的新链接。
  5. 外部div加载在主页面第一个div下面。
  6. 然后可以重复进程,在彼此之下创建一个div链。
  7. 然后链中的最后一个div将指向一个新页面,整理所有以前使用的查询字符串。

我可以通过填充主页和外部页面上的div来处理所有PHP工作。
这是我正在努力的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(){ } }); } 

只需调用此函数而不是使用load。 显然你需要修改代码(主要是成功函数中的代码),但这应该给你一个很好的起点。

您可以使用可选的数据参数将参数传递给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返回到eval等……这取决于任务。 该示例已简化,因此请根据您的需要进行扩展。

关于加载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”