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

Question

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

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

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

我需要的确切功能如下:

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.
我目前只能使用静态链接(如上所述).

Answer 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(){
        }
    });

}

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