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

问题描述：

我需要创建一个页面，使用Jquery和AJAX从外部页面加载div。JQuery/AJAX：使用动态内容加载外部DIV使用动态内容

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

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

确切功能，我需要如下：

主页包含永久DIV列出包含参数一些链接。
点击后，链接将参数传递给外部页面。
外部页面根据参数过滤记录集并用结果填充div。
新的div包含一组具有新参数的新链接。
外部div加载在主页第一格下面。
过程可以重复创建彼此之下的div链。
链中的最后一个div将指向一个新页面，整理所有先前使用的querystrings。

我可以处理所有的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请求。阅读documentation。这比自己构建URL好得多。您当然可以将动态生成的数据添加到参数列表中。

使用数据参数调用load（）将执行POST请求，而不是GET。 – 2009-08-14 13:56:34

答

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

将加载 “external.php？PARAM = 1 & otherParam = 2”

使用数据参数调用load（）将执行POST请求，而不是GET。您必须手动构建该URL。 – 2009-08-14 13:58:36

在问题中，它表示它必须是GET请求吗？ Jet的回答也包括POST建议，原来的海报似乎没有任何问题。 – gregers 2009-08-21 07:38:27

答

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来评估等等......这取决于任务。该示例已被简化，因此请将其扩展以适合您的需求。

谢谢大家的指点，我会有一点戏剧，看看我可以一起沙沙作响。 – ticallian 2009-05-28 08:37:35

答

本教程上装载AJAX内容是好的：

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

尤其是部分解释了如何读取Firebug的结果。

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

相关推荐