blocks|key|2982579|text|为什么不直接使用load方法呢？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2982580|$(+"#wtf"+).load(+"/echo/html+#link"+);|code-block|syntax|javascript|2982581|或者，这是您的小提琴修复和工作：|2982582|http://jsfiddle.net/hcrM8/4/|offset|length|2982583|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

Why don't you just use the load method?

<pre><code>$( "#wtf" ).load( "/echo/html #link" );
</code></pre>

Or, here's your fiddle fixed and working:

<a href="http://jsfiddle.net/hcrM8/4/" rel="nofollow">http://jsfiddle.net/hcrM8/4/</a>

blocks|key|2982634|text|如果您想解析它，jquery有一个绝妙的技巧:)|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2982635|+ParsedElements+=+$(htmlToParse);
+Console.log(ParsedElements);|code-block|syntax|javascript|2982636|现在，您有了DOM元素，您可以遍历这些元素，而无需将它们放在文档体中。|CODE|2982637|entityMap^0|8|6|0|0|6|3|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|O|$]]

If you would like to parse it, jquery has a nifty trick :)

<pre><code> ParsedElements = $(htmlToParse);
 Console.log(ParsedElements);
</code></pre>

You now have <code>DOM</code> elements you can traverse without placing them in the body of the document.

blocks|key|168305|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168306|+jQuery.parseHTML()|blockquote|168307|168308|http://api.jquery.com/jQuery.parseHTML/|offset|length|168309|168310|str+=+"hello,+my+name+is+jQuery.",
++html+=+$.parseHTML(+str+),
++nodeNames+=+[];

//+Gather+the+parsed+HTML's+node+names
$.each(+html,+function(+i,+el+)+{
++nodeNames[+i+]+=+"<li>"+%2B+el.nodeName+%2B+"</li>";
});|code-block|syntax|javascript|168311|你的小提琴上的ajax有些问题|168312|http://jsfiddle.net/hcrM8/5/|168313|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());|168314|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|13|0|0|0|0|0|0|S|1|0|0^^$0|@$1|2|3|-4|4|5|6|12|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|13|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|14|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|15|7|@]|8|@$G|16|H|17|1|18]]|9|$]]|$1|I|3|-4|4|5|6|19|7|@]|8|@]|9|$]]|$1|J|3|K|4|L|6|1A|7|@]|8|@]|9|$M|N]]|$1|O|3|P|4|5|6|1B|7|@]|8|@]|9|$]]|$1|Q|3|R|4|5|6|1C|7|@]|8|@$G|1D|H|1E|1|1F]]|9|$]]|$1|S|3|T|4|L|6|1G|7|@]|8|@]|9|$M|N]]|$1|U|3|-4|4|5|6|1H|7|@]|8|@]|9|$]]]|V|$W|$4|X|Y|Z|9|$10|F]]|11|$4|X|Y|Z|9|$10|R]]]]

<blockquote>
 jQuery.parseHTML()
 
 <a href="http://api.jquery.com/jQuery.parseHTML/" rel="nofollow">http://api.jquery.com/jQuery.parseHTML/</a>
</blockquote>

<pre><code>str = "hello, &lt;b&gt;my name is&lt;/b&gt; jQuery.",
 html = $.parseHTML( str ),
 nodeNames = [];

// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
 nodeNames[ i ] = "&lt;li&gt;" + el.nodeName + "&lt;/li&gt;";
});
</code></pre>

Some thing is wrong with your ajax on fiddle

<a href="http://jsfiddle.net/hcrM8/5/" rel="nofollow">http://jsfiddle.net/hcrM8/5/</a>

<pre><code>var html= '&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;title&gt;&lt;\/title&gt;&lt;link href="../css/popup.css" rel="stylesheet" /&gt;&lt;\/head&gt;&lt;body&gt;&lt;ul&gt;&lt;li&gt;&lt;a class="disabled" id="link"&gt;content&lt;\/a&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/body&gt;&lt;\/html&gt;';
 h = $.parseHTML(html);
 $('#data').text(h);
 $('#wtf').html($(h).find('#link').text());
</code></pre>

blocks|key|2769785|text|您的代码运行良好。您只是没有正确地使用jsFiddle的API。检查文档中是否有/echo/html/+(http://doc.jsfiddle.net/use/echo.html#html)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2769786|回应网址:/+|2769787|+/html/|blockquote|2769788|2769789|数据必须通过POST提供|2769790|2769791|因此，您需要更新AJAX调用才能使用POST。尾部的斜杠也是必需的。|2769792|$(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>'
++++++++}
++++});
});|code-block|syntax|javascript|2769793|演示：http://jsfiddle.net/hcrM8/6/|2769794|entityMap|0|LINK|mutability|MUTABLE|url|http://doc.jsfiddle.net/use/echo.html#html|1|http://jsfiddle.net/hcrM8/6/^0|14|B|1H|16|0|0|0|0|0|0|0|0|0|3|S|1|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|F|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1E|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1G|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1J|8|@]|D|@]|E|$T|U]]|$1|V|3|W|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|X|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]|15|$5|10|11|12|E|$13|16]]]]

Your code works fine. You just aren't using jsFiddle's API correctly. Check the docs for <code>/echo/html/</code> (<a href="http://doc.jsfiddle.net/use/echo.html#html" rel="noreferrer">http://doc.jsfiddle.net/use/echo.html#html</a>):
<blockquote>
URL: /echo/html/
Data has to be provided via POST
</blockquote>
So, you need to update your AJAX call to use POST. Also the trailing slash is needed.
<pre><code>$(function () {
 $.ajax({
 url: &quot;/echo/html/&quot;,
 type: &quot;post&quot;,
 dataType: &quot;html&quot;,
 success: function (data) {
 $('#data').text(data);
 $('#wtf').html($(data).find('#link').text());
 },
 data: {
 html: '&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;title&gt;&lt;\/title&gt;&lt;link href=&quot;../css/popup.css&quot; rel=&quot;stylesheet&quot; /&gt;&lt;\/head&gt;&lt;body&gt;&lt;ul&gt;&lt;li&gt;&lt;a id=&quot;link&quot;&gt;content&lt;\/a&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/body&gt;&lt;\/html&gt;'
 }
 });
});
</code></pre>
DEMO: <a href="http://jsfiddle.net/hcrM8/6/" rel="noreferrer">http://jsfiddle.net/hcrM8/6/</a>

blocks|key|168341|text|我正面临着同样的问题，这并不是因为你做错了什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168342|这是因为“innerHTML”标签不应该返回任何链接，它在jquery中被明确排除，你可以在下面这一行找到：|168343|rnoInnerhtml+=+/<(?:script%7Cstyle%7Clink)/i,|code-block|syntax|javascript|168344|HTML中的此标记应链接到外部样式表。|168345|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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: 

<pre><code>rnoInnerhtml = /&lt;(?:script|style|link)/i,
</code></pre>

This tag in HTML is supposed to link to external style sheet.

blocks|key|2982792|text|我也遇到了同样的问题，我修复了将请求的html代码封装到一个容器元素中的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2982793|糟糕的例子：|2982794|<a+href="link">Linkname</a>
Hello+world|code-block|syntax|javascript|2982795|Jquery无法将其转换为元素，因为它希望转换单个元素树。但是那些没有容器。下面的例子应该可以用：|2982796|正确的示例：|2982797|<div>
++++<a+href="link">Linkname</a>
++++Hello+world
</div>|2982798|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I had the same problem and i fixed encapsulating requested html code into just one container element.

Bad Example:

<pre><code>&lt;a href="link"&gt;Linkname&lt;/a&gt;
&lt;p&gt;Hello world&lt;/p&gt;
</code></pre>

Jquery couldnt convert this to element, because it wishes to convert a single element tree. But those are not having a container. Following example should work:

Right Example:

<pre><code>&lt;div&gt;
 &lt;a href="link"&gt;Linkname&lt;/a&gt;
 &lt;p&gt;Hello world&lt;/p&gt;
&lt;/div&gt;
</code></pre>

blocks|key|168355|text|并不是所有的答案都指向真正的问题，jQuery似乎忽略了head和body标签，并创建了一个节点数组。您通常需要的是提取正文并对其进行解析。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|168356|看看这个有用的答案，我不想复制他的作品：https://stackoverflow.com/a/12848798/2590616。|offset|length|168357|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/12848798/2590616^0|0|K|18|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

All answers do not point to the real problem, jQuery seems to ignore the head and body tag and creates an array of nodes. 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: <a href="https://stackoverflow.com/a/12848798/2590616">https://stackoverflow.com/a/12848798/2590616</a>.

What I'm trying to do seems simple: get an HTML page through <code>$.ajax()</code> and pull out a value from it.

<pre><code>$(function () {
 $.ajax({
 url: "/echo/html",
 dataType: "html",
 success: function (data) {
 $('#data').text(data);
 $('#wtf').html($(data).find('#link').text());
 },
 data: {
 html: '&lt;!DOCTYPE html&gt;&lt;head&gt;&lt;title&gt;&lt;\/title&gt;&lt;link href="../css/popup.css" rel="stylesheet" /&gt;&lt;\/head&gt;&lt;body&gt;&lt;ul&gt;&lt;li&gt;&lt;a id="link"&gt;content&lt;\/a&gt;&lt;\/li&gt;&lt;\/ul&gt;&lt;\/body&gt;&lt;\/html&gt;'
 }
 });
});
</code></pre>

The problem is that jQuery refuses to parse the returned HTML.

The <a href="http://jsfiddle.net/hcrM8/1/">fiddle</a> 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 <a href="http://jsfiddle.net/wtfsven/ywVKT/1/">new fiddle</a> 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. Is this a known problem?

Parsing returned HTML from jQuery AJAX request

容器

jQuery

我想要做的似乎很简单:通过$.ajax()获取一个超文本标记语言页面，并从中提取一个值。$(function () {    $.ajax({        url: "/echo/html",        dataType: "html",        success: function (data) {    ...

问解析从jQuery AJAX请求返回的HTML
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问解析从jQuery AJAX请求返回的HTMLEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问解析从jQuery AJAX请求返回的HTML
EN