使用 Javascript 解析 HTML 中的 AJAX 响应

Question

我正在使用 Javascript 在我的代码中使用 AJAX 调用。

function loadFacility(callback)
{
    //alert('In loadFacility');
    var xmlhttp;
    var keys=document.firstCallInformation.facilityselect.value;
    var urls="http://localhost:8080/webfdms/showFirstCallInformation.do?vitalsId=366";
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status == 200)
        {
             //var some=xmlhttp.responseXML.documentElement;
            var response = xmlhttp.responseText;
            console.log(response)
            callback(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET",urls,true);
    xmlhttp.send(null);
}
function loadFacilityCallback(response){
if(response != null){
    //alert(response);
    console.log(response);
    var div = document.createElement("div");
    div.innerHTML = response;
    document.getElementById("facilityselect").innerHTML = div.querySelectorAll("select#facilityselect");;
}

编辑： 我已经更新了我的回调函数。但在这里我收到了 select 列表作为 [Object Nodelist]。现在如何在我的 HTML 中显示？

在回调函数中，我收到了 HTML 的响应，现在我想解析 HTML 响应，以便我可以进一步处理它。我正在使用普通的 javascript 来这样做。如何解析收到的 ajax 响应 HTML?

Answer 1

试试这个：

var dom='Your http response';
var wrapper=document.createElement('div');
wrapper.innerHTML=dom;
var elemContainer=wrapper.firstChild;
var elemToFind=elemContainer.querySelectorAll('option');
var facilityselect=document.getElementById('facilityselect');
facilityselect.innerHTML='';
for(var i=0, len=elemToFind.length; i < len; i++){
    facilityselect.appendChild(elemToFind[i]);
}

Creating a fake div element and appending your string which contains a HTML string will help. To insert a DOM object in specific selector, you need to user appendChild method.In case you want to empty the selector and then insert the DOM then set innerHTML as empty (selector.innerHTML="") and then do the append operation.

Answer 2

创建一个 DIV 元素并将 HTML 放入其中 innerHTML。这将解析它。

var div = document.createElement("div");
div.innerHTML = response;

现在您可以在 div 中处理它，例如div.querySelector(".classname")。要获取所有 <select> 标签，请执行：

var selects = div.querySelectorAll("select");

要将其放入您的网页，您可以这样做：

document.getElementById("facilityselect").innerHTML = div.querySelector("select#facilityselect").innerHTML

使用 Javascript 解析 HTML 中的 AJAX 响应

Parse AJAX response in HTML using Javascript

html

javascript

ajax

html-parsing