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

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

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

我编写代码的主要教程来自：

我需要的确切功能如下：

主页包含一个永久div，其中列出了一些包含参数的链接

单击后，链接将参数传递到外部页面

外部页面根据参数筛选记录集，并用结果填充div

新的div包含一组带有新参数的新链接

外部div加载在主页第一个div下面

然后可以重复这个过程，在彼此下面创建一个div链

然后，链中的最后一个div将指向一个新页面，该页面将整理所有以前使用的querystring

我可以通过填充主页面和外部页面上的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。

---

目前，我只能使用静态链接（如上所述）执行此操作。

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

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

将加载“external.php？param=1和otherParam=2”

---

在这个示例中，服务器端脚本应该返回div的内部内容。确保可以将XML序列化数据或JS返回到eval等。。。这取决于任务。这个例子已经简化，所以可以扩展它以满足您的需要。

我不确定您是否已经解决了这个问题，但是我很惊讶没有人提到使用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。显然，您必须稍微修改代码（主要是success函数中的代码），但这应该为您提供一个良好的起点

这篇关于加载AJAX内容的教程很好：

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

使用以下内容：

function GetDiv(id) {

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


});

}

---

谢谢大家的指点，我将有一个小游戏，看看我可以一起沙沙作响。如果这个例子太抽象，请要求更多。我可以详细解释它，但我认为通用的想法已经足够开始使用它了。我尝试了解决方案，但我实现它的方式导致原始div被外部页面的全部内容替换。我需要在divs的链式效果下添加新的div。然后使用而不是.html（）。我刚刚编写了通用解决方案。在onLoadDiv（）中，您可以应用更复杂的魔法，而不仅仅是分配容器的内部内容。但是我不能提供完整的解决方案，因为我没有发生这种情况的整个页面：）。使用数据参数调用load（）执行POST请求，而不是GET。使用数据参数调用load（）执行POST请求，而不是GET。您必须手动构建该URL。在问题中，它在哪里声明它必须是GET请求？Jet的回答还包括一个帖子建议，而最初的海报似乎对此没有任何问题。对于未来的任何人来说，上述方法就是我最终实际使用的方法，尽管我从来没有抽出时间来更新这篇帖子，所以就这样。

function GetDiv(id) {

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


});

}