AJAX加載外部頁面div到當前頁面

我想從另一個頁面加載使用AJAX的div，但它似乎將整個頁面加載到我的div。我想只加載一個特定的div。AJAX加載外部頁面div到當前頁面

$('.overlay').on('click', function() { 
    var page_url = $(this).attr('href'); 

    $.ajax({ 
     url: page_url + ' #single_portfolio', 
     dataType: 'html', 
     success: function(data) { 
      $('#overlay').html(data); 
     } 
    }); 

    return false; 
});

請讓我知道我做錯了什麼。

來源

2013-08-20 Shivam

您正在加載的頁面中是否有多於所需的div？ –

嘗試使用'.load（）'代替：'$（'＃overlay'）。load（page_url +'#single_portfolio'）;' – musicnothing

你不能像''single_portfolio''那樣使用$ .ajax，這是一個只能用'.load'的語法 –

FIDDLE

你可以做到這一點與：

$('#overlay').load(page_url + ' #single_portfolio');

如果你必須使用$.ajax()試試這個：

$.ajax({ 
    url: page_url, 
    dataType: 'html', 
    success: function(data) { 
     $('#overlay').html($(data).children('#single_portfolio')); 
     //or $(data).filter('#single_portfolio') 
    } 
});

來源

2013-08-20 17:19:59 musicnothing

謝謝。 '$（data）.children'不適用於我，但'$（data）.filter'確實有效。 – Shivam

您不能像使用AJAX一樣在遠程文檔中使用CSS選擇器。 URL後的#single_portfolio將作爲hash（沒有前面的空格）。您需要一個能夠準確返回您的AJAX呼叫所需的URL。或者，您可以獲取整個頁面，並在回調函數中執行一些處理以提取所需的部分。

來源

2013-08-20 17:18:52 marekful

可以使用$('#overlay').load(page_url + ' #container');，而不是你$.ajax()通話

見http://api.jquery.com/load/

來源

2013-08-20 17:19:08 acjay

不幸的是，你要替換$.ajax呼籲$.load電話。只有$.load有能力加載頁面的片段。從$.loaddocumentation：

的.load（）方法，不像$獲得（），允許我們指定的一部分要被插入在遠程文件。這是通過url參數的特殊語法實現的。如果字符串中包含一個或多個空格字符，則假定第一個空間後面的字符串部分是用於確定要加載的內容的jQuery選擇器。

$('#overlay').html(strLoadingBar).load(page_url + ' #single_portfolio'); 
// assuming you have your loading bar assigned to a string variable "strLoadingBar"

當此方法執行，它檢索的AJAX /的test.html，內容但隨後的jQuery解析返回的文檔與容器的ID找到的元素。該元素及其內容將插入到具有結果ID的元素中，並且檢索到的其餘文檔將被丟棄。

jQuery使用瀏覽器的.innerHTML屬性來解析檢索到的文檔並將其插入到當前文檔中。在此過程中，瀏覽器通常會過濾文檔中的元素，如或元素。因此，由 .load（）檢索到的元素可能與瀏覽器直接檢索文檔時可能不完全相同。

來源

2013-08-20 17:21:56 DevlshOne

AJAX加載外部頁面div到當前頁面

回答

相關問題