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

Z时代
2024-01-10
分类：问答

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

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

我基于我的代码的主要教程来自：http:

//yensdesign.com/2008/12/how-to-load-content-via-ajax-in-

jquery/

我需要的确切功能如下：

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

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

外部页面根据参数过滤记录集，并用结果填充div。

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

外部div加载在首页first 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。

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

回答：

我不确定您是否已经解决了这个问题，但是我很惊讶没有人提到使用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(){
        }
    });
}