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。 顯然你需要修改一下代碼（主要是成功函數），但這應該給你一個很好的起點。

Answer 2

您可以使用可選的數據參數將參數傳遞給GET請求。 閱讀文檔 。 這比自己構建URL要好得多。 您當然可以將動態生成的數據添加到參數列表中。

Answer 3

有關加載AJAX內容的教程很好：

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

特別是解釋如何使用Firebug讀取結果的部分。

Answer 4

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 5

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

將加載“external.php？param = 1＆otherParam = 2”