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

【问题标题】：JQuery/AJAX: Loading external DIVs using dynamic contentJQuery/AJAX：使用动态内容加载外部 DIV
【发布时间】：2009-05-28 08:01:24
【问题描述】：

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

我遇到过一些不错的教程，但都是基于静态内容的，我的链接和内容都是由 PHP 生成的。

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

我需要的具体功能如下：

主页包含一个永久 div，其中列出了一些包含参数的链接。
点击后，链接将参数传递到外部页面。
外部页面根据参数过滤记录集并使用结果填充 div。
新的 div 包含一组带有新参数的新链接。
外部 div 加载在主页第一个 div 下方。
然后可以重复该过程，在彼此之下创建一个 div 链。
链中的最后一个 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。
我目前只能使用静态链接（如上）。

【问题讨论】：

标签： php jquery ajax

【解决方案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(){
        }
    });

}

只需调用此函数而不是使用加载。显然，您必须稍微修改一下代码（主要是成功函数中的内容），但这应该会给您一个很好的起点。

【讨论】：

对于以后的任何人来说，上面的方法都是我最后实际使用的，虽然我一直没有时间更新这篇文章，所以就这样吧。

【解决方案2】：

您可以使用可选的数据参数将参数传递给 GET 请求。阅读documentation。这比自己构建 URL 要好得多。您当然可以将动态生成的数据添加到参数列表中。

【讨论】：

使用数据参数调用 load() 会执行 POST 请求，而不是 GET。

【解决方案3】：

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 等……这取决于任务。该示例已简化，因此请对其进行扩展以满足您的需求。

【讨论】：

谢谢大家的指点，我会玩一点，看看我能一起沙沙作响。
如果这个例子太抽象，请多多指教。我可以详细解释它，但我认为共同的想法足以开始玩弄它。
我已经给出了解决方案，但是我实现它的方式导致原始 div 被外部页面的全部内容替换。我需要在 div 的链式效果下添加新的 div。
然后使用docs.jquery.com/Manipulation/append#content 而不是.html()。我刚刚写了通用解决方案。在 onLoadDiv() 中，您可以应用更复杂的魔法，而不仅仅是分配容器的内部内容。但是我无法为您提供完整的解决方案，因为我没有发生这种情况的整个页面:)。

【解决方案4】：

这个加载AJAX内容的教程不错：

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

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

【讨论】：

【解决方案5】：

使用这个：

function GetDiv(id) {

$.ajax({
    type: "GET",
    url: "external.php"
    dataType: 'html',
    data:id,   
    success: function(html){
             $("#container").append(html);
    },


});

}

【讨论】：

【解决方案6】：

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

将加载“external.php?param=1&otherParam=2”

【讨论】：

使用数据参数调用 load() 会执行 POST 请求，而不是 GET。您必须手动构建该 URL。
问题在哪里声明它必须是一个 GET 请求？ Jet 的回答还包括一个 POST 建议，原始发帖人似乎对此没有任何问题。