发表新帖
发表新帖

Parsing returned HTML from jQuery AJAX request

后端 未结
关注
7 1292
你的背包
你的背包 2020-12-01 14:01

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

$(function () {
    $.ajax({
相关标签:
7条回答
  • 余生分开走
    2020-12-01 14:41

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

    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. But those are not having a container. Following example should work:

    Right Example:

    <div>
    <a href="link">Linkname</a>
    <p>Hello world</p>
</div>
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-01 14:47

    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

    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());
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-01 14:50

    Your code works fine. You just aren't using jsFiddle's API correctly. Check the docs for /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. 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/

    0 讨论(0)
  • 南方客
    2020-12-01 14:50

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

     ParsedElements = $(htmlToParse);
 Console.log(ParsedElements);

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

    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-01 14:50

    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: https://stackoverflow.com/a/12848798/2590616.

    0 讨论(0)
  • 傲寒
    2020-12-01 15:02

    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: 

    rnoInnerhtml = /<(?:script|style|link)/i,

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

    0 讨论(0)
 看不清?
提交回复
热议问题