$.ajax() 仅获取正文答案

【问题标题】：$.ajax() get body only$.ajax() 仅获取正文
【发布时间】：2011-04-21 03:39:25
【问题描述】：

我有这样的脚本

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing Ajax</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<a class="test" href="getthis.php">click here</a>
<div class="get"></div>

<script type="text/javascript">
    $('.test').click(function(event){
        event.preventDefault();
        var a = $('body');
        $.ajax({
            url: "/getthis.php",
            dataType: 'text',
            success: function(data){            
                $('.get').append(data.find);
            }
        });
    });
</script>
</body>
</html>

通过这个脚本，我尝试获取内容 getthis.php

getthis.php 只包含这个

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        Olalalalala bebe
    </body>
    </html>

当我这样做时，我会得到 getthis.php 的完整 html

我怎样才能只获取正文内容？这只是意味着。 “奥拉拉拉拉贝贝”

谁能给我解释一下？

谢谢...

【问题讨论】：

为什么不删除所有的 html 标签并留下'Olalalalala bebe'？
@Tim: 因为网站有一个版本有Ajax，另一个没有AJAX，也就是说这个页面需要HTML标签

标签： jquery html ajax

【解决方案1】：

如果不需要，您可以从 getthis.php 中排除 html 标记，以获取您想要在页面上显示的数据。

【讨论】：

【解决方案2】：

使用http://api.jquery.com/load/可以加载特定的页面片段

【讨论】：

+1 我可以说这是基于操作问题的最佳方法
$(".get").load("getthis.php" body);但是如果你的响应 gethis.php 页面有一个 id ="thisbody" 的 body tg 那么代码将是 $(".get").load("getthis.php" #thisbody);
在测试了你的建议后，我更喜欢这个答案。
这对body标签不起作用，因为有些浏览器在使用load()时会去掉它；

【解决方案3】：

想知道这是否有帮助：

$(data).text();

这似乎开箱即用：

$.ajax({
    url: 'http://stackoverflow.com/questions/3861325/ajax-get-body-only/',
    success: function (data) {
        alert($(data).text().replace(/\s+/gm, ' '));
    }
});

【讨论】：

我在 console.log "(一个空字符串)" 中得到了这个
我已经更新了帖子，现在它似乎可以在控制台中使用。（PS：要在控制台中运行该示例，您必须从显示来自stackoverflow.com 的页面的浏览器窗口中运行它。

【解决方案4】：

应该这样做：

$('.get').load('/getthis.php body');

编辑：抱歉，我刚刚对此进行了测试，使用body 作为选择器似乎不起作用，这让我感到惊讶。如果我将getthis.php 更改为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
    </head>
    <body>
        <div id="test">
        Olalalalala bebe
        </div>
    </body>
</html>

然后这样称呼它：

$('.get').load('/getthis.php #test');

我得到了您正在寻找的结果。但在这种情况下，body 似乎不是一个有效的选择器。

【讨论】：

是的，你说得对。它似乎不支持身体。我尝试使用 ID 和 Class 它的工作。非常感谢。
不客气。如果有人知道为什么这不适用于 body 作为选择器，请发表评论并告诉我们！
jQuery 使用浏览器的 .innerHTML 属性来解析检索到的文档并将其插入到当前文档中。在此过程中，浏览器通常会从文档中过滤元素，例如、或 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 元素。因此，通过 .load() 检索到的元素可能与浏览器直接检索到的文档不完全相同。来自<a href="/default/index/tourl?u=aHR0cDovL2FwaS5qcXVlcnkuY29tL2xvYWQ%3D" rel="nofollow" target="_blank">api.jquery.com/load</a>

【解决方案5】：

很简单。将 BODY 内部再包裹一层 DIV 即可：

$.get(url, {}, function(data){
  var data = data.replace('<body', '<body><div id="body"').replace('</body>','</div></body>');
  var body = $(data).filter('#body');
  //... do what you want with body ...
});

【讨论】：

嗯，这可以满足我的需要，但如果您正在加载的页面很大（两个 .replace 会创建两个新字符串），它并不完全漂亮并且可能非常慢。
可能使用 indexOf("

【解决方案6】：

$.ajax({
    url: "some.html",
    type: "get",
    dataType: 'html',
    success: function(data) {
        $('#here').html(data);
        $('#here').children('meta,link,title,style').remove();
    },
});

【讨论】：

还有