Javascript 如何使用jQuery从Ajax获取的内容中提取HTML

我有一个页面，其中有几个选项元素，它们的值指向外部页面。我的目标是使用Ajax提取所选选项的值，并使用该值从外部页面加载内容。例如，当用户选择排球时，我将获得“Volleyball.html”值，使用Ajax检索该页面并将其目录内容加载到当前页面。这是我的密码：

$("select").change(function(){
var selectedURL=$("option:selected",this).val();
if(selectedURL!=="Select One"){
    $("#center").html("<p class='processing'></p>");    
    $.get(selectedURL,function(data){
    var extractedContent=$("#catalog",data);
    console.log(extractedContent); //Firebug says extractedContent is '[]'
    $("#center").html(extractedContent); //Nothing is inserted inside div#content
    },"html");
}

我不擅长jQuery，在上面的几篇文章中有一些混合和匹配的代码。现在我不确定出了什么问题，但是没有加载任何内容-应该保存提取内容的中间div块是空的

有人能帮我找出上面代码的错误吗？非常感谢

您不能使用$'catalog'，这样的数据。要提取内容，可以创建jQuery对象，并分配返回的HTML，然后从中提取：

$("select").change(function(){
    var selectedURL=$("option:selected",this).val();
    if(selectedURL!=="Select One"){
        $("#center").html("<p class='processing'></p>");    
        $.get(selectedURL,function(data){
            $("#center").html($(data).find("#catalog"));
        },"html");
    }
});

var extractedContent = $('<div />').html(data).find('#catalog').html();
console.log(extractedContent);
$("#center").html(extractedContent); 

加载方法适用于以下情况：

$('select').change(function () {
    var selectedURL = $('option:selected', this).val();

    if (selectedURL !== 'Select One') {
        $('#center').html('<p class="processing"></p>').load(selectedURL + ' #catalog');
    }
});

---

它可以只获取一个URL，也可以获取一个URL，后跟一个选择器，该选择器只会将匹配元素目录的内容加载到它在中心调用的元素中。

大家好，谢谢您的帮助。然而，似乎只有niftydude建议的代码有效。Power浮标和corneliu的代码都输出整个html，而不仅仅是目录的内容。嘿@Power浮标，谢谢你的帮助。但是，我测试了一下，似乎像你建议的那样，在内容id后面加一个+符号可以达到与提取整个html相同的效果，所以对我来说不起作用。嗯，你确定要在URL和选择器之间加一个空格吗？它应该是：load'url selector'。我试过了。loadselectedURL catalog-Firebug抱怨：“参数列表后缺少”。我也尝试了.loadselectedURL+目录，但正如我所说，它检索所有内容。我甚至尝试了.loadselectedURL+目录和.loadselectedURL+目录-两者都无法加载任何内容。我知道我们可以使用load'test.php id'，但在我的例子中，我没有使用显式URL，而是使用selectedURL，这就是我遇到问题的原因。它应该是：.loadselectedURL+'catalog'。请注意目录前的空格“”。它是必需的，以便load理解传入的字符串既是URL又是选择器。编辑：.loadselectedURL catalog是一个语法错误，.loadselectedURL+catalog会尝试加载字符串selectedURL+catalog和。loadselectedURL+catalog之前没有空格，catalog会尝试加载类似于/some/url/catalog的内容，这也不正确。现在我明白了。之前没有注意到空间。空间有多大的不同。谢谢你的解释，伙计！嘿@niftydude，谢谢-你的代码工作得很好。顺便说一下，如果我从$.get函数中取出最后一个“html”参数，我注意到即使你的代码也失败了，错误是“节点不能插入层次结构中的指定点”。知道为什么会这样吗？嗯，不知道为什么会失败，因为最后一个参数的默认值实际上是“html”，你能在没有最后一个参数的情况下显示代码吗？据我所知，最后一个参数是可选的，不是吗？不管怎样，我只是想知道为什么我们必须把最后一个参数作为“html”放进去。不要介意。不管怎样，下面是失败的代码：ifselectedURL==选择一个{$center.html

；$.getselectedURL，functiondata{var extractedContent=$.htmldata.html；console.logextractedContent；$center.htmlextractedContent；}；}@anthonyteon是可选的，默认为“html”，我的意思是：好的，让我看看，给我一个second@anthonyteo事实上，在的文档中，它说第四个参数是智能猜测，所以我认为如果你显式地将它设置为“html”是最安全的。谢谢你的建议，它不起作用——它有效地提取了整个html，而不仅仅是目录。另外，您可能想知道上面的$center.html$data.findcatalog没有运行-它必须是$center.html$data.findcatalog；相反