Question

我需要创建一个页面，使用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。我目前只能使用静态链接（如上所述）。

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。显然你需要修改一下代码（主要是成功函数），但这应该给你一个很好的起点。

Answer 2

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

Answer 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等......这取决于任务。该示例已经过简化，因此请根据您的需要进行扩展。

Answer 4

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

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

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

Answer 5

使用此：

function GetDiv(id) {

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


});

}

Answer 6

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

将加载“external.php？param = 1＆amp; otherParam = 2”

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

6 个答案: