0

我正在尝试使用 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;
});

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

4

4 回答 4

2

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')
    }
});
于 2013-08-20T17:19:59.723 回答
1

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

于 2013-08-20T17:18:52.827 回答
1

不幸的是，您正试图用呼叫代替$.ajax呼叫$.load。仅$.load具有加载页面片段的能力。从$.load 文档中：

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 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 为 container 的元素。该元素及其内容被插入到 ID 为 result 的元素中，其余检索到的文档将被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤元素，例如 、 或 元素。因此，通过 .load() 检索到的元素可能与浏览器直接检索到的文档不完全相同。

于 2013-08-20T17:21:56.550 回答
0

您可以使用$('#overlay').load(page_url + ' #container');而不是您的$.ajax()电话

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

于 2013-08-20T17:19:08.983 回答