Question

我正在尝试使用AJAX从另一个页面加载div，但它似乎将整个页面加载到我的div中。我想加载一个特定的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;
});

请让我知道我做错了什么。

Answer 1

FIDDLE

您可以使用.load()：

执行此操作

$('#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')
    }
});

Answer 2

您不能像通过AJAX那样在远程文档中使用CSS选择器。 URL之后的#single_portfolio将充当hash（没有前面的空格）。您需要一个能够准确返回AJAX调用所需内容的URL。或者，您可以获取整个页面，并在回调函数中进行一些处理以提取所需的部分。

Answer 3

很遗憾，您正试图用$.ajax来代替$.load来电。只有$.load才能加载页面片段。来自$.load documentation：

与$ .get（）不同，.load（）方法允许我们指定一部分要插入的远程文档。这是通过特殊的方式实现的 url参数的语法。如果有一个或多个空格字符包含在字符串中，第一个字符串后面的字符串部分假设space是一个确定内容的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（）可能与检索文档时不完全相同   直接通过浏览器。

Answer 4

您可以使用$('#overlay').load(page_url + ' #container');代替$.ajax()来电

请参阅http://api.jquery.com/load/

AJAX将外部页面div加载到当前页面

4 个答案: