Question

我正在对服务器进行GET调用，它返回一个HTML字符串。我想解析这个HTML，只获取id为'container'的HTML。

这是我的代码：

   $("#name").click(function() {
     $.ajax({
            type : 'GET',
            url : "/",
            dataType : 'text',
            success : function(data) {
                var object = $('<div/>').html(data).contents(); //Convert the String into an object.
                var container = object.find('container'); //This successfully gets the object with the id 'container'
                console.info(container.html()); //Here is where I want to output just the HTML of the container.




            },
            error : function(data) {
                console.error("Error getting homepage");
            }
        });
        return false;
});

我想输出具有id'container'的HTML。现在它什么都没输出。我不认为我是以最好的方式做到这一点。

另外：我将把HTML加载到页面上的另一个元素中。

Answer 1

这是我在自己的代码中使用的内容：

var xhr = new XMLHttpRequest();
var url = "http://....";
xhr.open("GET", url, true);
xhr.send();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        html = $.parseHTML( xhr.responseText );
        var container = $("#container", html);
    }
}

Answer 2

我能够通过以下方式完成我想要的任务：

$("#name").click(function() {
     $.ajax({
            type : 'GET',
            url : "/",
            dataType : 'text',
            success : function(data) {
                var parser = new DOMParser();
                doc = parser.parseFromString(data, "text/html");
                var remainder = doc.getElementById("main-content").innerHTML;
               $("#r-div").replaceWith("<div id=\"main-content\">" + remainder + "</div>");
            },
            error : function(data) {
                console.error("Error getting homepage");
            }
        });
        return false;

}）;

这会得到一个HTML响应然后提取＆＃34;主要内容＆＃34; div并替换＆＃34; r-div＆＃34;在当前页面中使用HTML

如何解析从AJAX调用返回的HTML

2 个答案: