JQuery AJax获取页面碎片查找与筛选

JQuery AJax Getting Page Fragments Find vs Filter

本文关键字：查找 筛选 碎片 AJax 获取 JQuery      更新时间：2023-09-26

这是我正在测试的Ajax代码的形式。

$('body').on('submit','#sign-in', function(e) {
    e.preventDefault();
    var data = $(this).serialize();
    var url = $(this).attr('action');
    $.ajax({
        //this is the php file that processes the data and send mail
        url : url,
        type : "POST",
        data : data,
        dataType:"html",
        //Do not cache the page
        cache : false,
        //success
        success : function(response,status) {
            console.log($(response).filter('#dashboard'));
            console.log($(response).find('#dashboard').html());
        }
    });
});

以下是回应。

<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<body>
    <div id = "dashboard">
        <div id = "dash2">
        <h1>HELLO</h1>
        </div>
    </div>
</body>
</html>

根据上面的代码，成功的jQuery filter能够获取id为#dashboard的div，但find返回了一个undefined。

为什么它会那样工作？

为了您的信息，我正在使用JQuery 1.9

更新

根据Bergi的建议，我删除了返回的html的html、body和head标签，这就是我收到的错误。

未捕获错误：语法错误，无法识别的表达式：

你好

你好，菲奇jquery-1.9.0.min.js:2
jQuery将整个页面设置为<div>的innerHTML，因此不会解析doctype、html、head和body元素。您只得到一个结果元素的集合，由于#dashboard是这些顶级元素之一，因此需要filter而不是find。

另请参阅：

  • 用jquery解析完整的html页面
  • 用jQuery抓取HTML文档，有可能吗

我不知道如何解决这个问题，显然有很多jQuery的怪癖。我能想到的：

  • 尝试jQuery.parseXML
  • 依赖filter从jQuery集合中获取有问题的元素。不过，由于浏览器似乎对解析内容不一致，因此应该执行类似$response[$response.is("#dashboard") ? "filter" : "find"]("#dashboard")的操作
  • 将格式错误的集合附加到某个元素和其中的find：$("<div/>").html(response).find("#dashboard")
  • 等待jQuery.parseHTML
  • 不要发送整个HTML文档，只发送您感兴趣的#dashboard元素作为HTML字符串

如果您使用的是jquery 1.9，您不应该再像这样解析html：

var html = $(response);

相反，您应该使用以下内容：

var html = $.parseHTML(response);
html = $(html).find('#dashboard').html();

来自Jquery Docs 1.9:传递给jQuery（）的以小于字符以外的字符开头的HTML字符串将被解释为选择器。由于字符串通常不能被解释为选择器，因此最有可能的结果是Sizzle选择器引擎抛出的"无效选择器语法"错误。使用jQuery.parseHTML（）解析任意HTML

您应该使用如上所述的parseHTML。filter和find之间的区别似乎在于元素在返回的HTML片段中的位置。如果您正在查找#foo，那么如果#foo是返回HTML中的顶级元素，则使用.filter（'#foo'），否则使用.found（'#foo'）。

相关文章：