解析从jQuery AJAX请求返回的HTML
[英]Parsing returned HTML from jQuery AJAX request
问题描述
What I'm trying to do seems simple: get an HTML page through $.ajax() and pull out a value from it. 
我想要做的似乎很简单：通过$.ajax()获取一个HTML页面并从中提取一个值。
$(function () {
$.ajax({
url: "/echo/html",
dataType: "html",
success: function (data) {
$('#data').text(data);
$('#wtf').html($(data).find('#link').text());
},
data: {
html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
}
});
});
The problem is that jQuery refuses to parse the returned HTML. 问题是jQuery拒绝解析返回的HTML。
The fiddle I'm play with this in isn't working in the mean time, so there's little else I can do to provide a working example. 我正在玩这个小提琴并不是在平时工作，所以我无能为力提供一个有效的例子。
UPDATE: My new fiddle is working fine, but it seems the problem is that in my actual project I'm trying to parse a large, complex bit of HTML. 更新：我的新小提琴工作正常，但似乎问题是，在我的实际项目中，我正在尝试解析大量复杂的HTML。 Is this a known problem? 这是一个已知的问题吗？
7 个解决方案
解决方案1
18 已采纳 2013-11-15 18:40:30
Your code works fine. 你的代码运行正常。 You just aren't using jsFiddle's API correctly. 您只是没有正确使用jsFiddle的API。 Check the docs for /echo/html/ ( http://doc.jsfiddle.net/use/echo.html#html ): 检查/echo/html/ /（http://doc.jsfiddle.net/use/echo.html#html ）的文档：
URL: /echo/html/
Data has to be provided via POST
So, you need to update your AJAX call to use POST. 因此，您需要更新AJAX调用以使用POST。 Also the trailing slash is needed. 还需要尾随斜杠。
$(function () {
$.ajax({
url: "/echo/html/",
type: "post",
dataType: "html",
success: function (data) {
$('#data').text(data);
$('#wtf').html($(data).find('#link').text());
},
data: {
html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
}
});
});
DEMO: http://jsfiddle.net/hcrM8/6/ 演示： http ： //jsfiddle.net/hcrM8/6/
解决方案2
6 2013-11-15 18:12:15
If you would like to parse it, jquery has a nifty trick :) 如果你想解析它， jquery有一个漂亮的技巧:)
ParsedElements = $(htmlToParse);
Console.log(ParsedElements);
You now have DOM elements you can traverse without placing them in the body of the document. 您现在拥有可以遍历的DOM元素，而无需将它们放在文档正文中。
解决方案3
3 2013-11-15 18:25:54
jQuery.parseHTML()
http://api.jquery.com/jQuery.parseHTML/
str = "hello, <b>my name is</b> jQuery.",
html = $.parseHTML( str ),
nodeNames = [];
// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});
Some thing is wrong with your ajax on fiddle 你的小提琴上的ajax有些问题
http://jsfiddle.net/hcrM8/5/ http://jsfiddle.net/hcrM8/5/
var html= '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>';
h = $.parseHTML(html);
$('#data').text(h);
$('#wtf').html($(h).find('#link').text());
解决方案4
2 2013-11-15 18:11:49
Why don't you just use the load method? 你为什么不只使用加载方法？
$( "#wtf" ).load( "/echo/html #link" );
Or, here's your fiddle fixed and working: 或者，这是你的小提琴修复和工作：
解决方案5
1 2016-05-27 13:42:19
I had the same problem and i fixed encapsulating requested html code into just one container element. 我有同样的问题，我修复了将请求的html代码封装到一个容器元素中。
Bad Example: 不好的例子：
<a href="link">Linkname</a>
<p>Hello world</p>
Jquery couldnt convert this to element, because it wishes to convert a single element tree. Jquery无法将其转换为元素，因为它希望转换单个元素树。 But those are not having a container. 但那些没有容器。 Following example should work: 以下示例应该工作：
Right Example: 正确的例子：
<div>
<a href="link">Linkname</a>
<p>Hello world</p>
</div>
解决方案6
1 2018-01-12 14:42:49
All answers do not point to the real problem, jQuery seems to ignore the head and body tag and creates an array of nodes. 所有答案都没有指出真正的问题，jQuery似乎忽略了head和body标签并创建了一个节点数组。 What you normally want is, extract the body and parse it. 你通常想要的是，提取身体并解析它。
Take a look at this helpful answer, I do not want to copy his work: https://stackoverflow.com/a/12848798/2590616 . 看看这个有用的答案，我不想复制他的工作： https ： //stackoverflow.com/a/12848798/2590616 。
解决方案7
0 2014-12-02 15:54:46
I am facing the same problem, and it is not because you are doing something wrong. 我面临着同样的问题，并不是因为你做错了什么。
it's because the "link" tag is not supposed to have any innerHTML returned, it's explicitly excluded in jquery, you will find some where this line: 这是因为“link”标签不应该返回任何innerHTML，它在jquery中被明确排除，你会发现这一行的某些地方：
rnoInnerhtml = /<(?:script|style|link)/i,
This tag in HTML is supposed to link to external style sheet. HTML中的此标记应该链接到外部样式表。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.