使用 Javascript 在 HTML 中解析 AJAX 响应答案

【问题标题】：Parse AJAX response in HTML using Javascript使用 Javascript 在 HTML 中解析 AJAX 响应
【发布时间】：2015-11-21 21:33:41
【问题描述】：

我在使用 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");;
}

编辑： 我已经更新了我的回调函数。但是在这里我收到了选择列表作为[对象节点列表]。现在如何在我的 HTML 中显示？

在回调函数中，我收到了 HTML 格式的响应，现在我想解析该 HTML 响应，以便进一步处理它。我正在使用普通的javascript来做到这一点。如何解析作为 HTML 接收的 ajax 响应？

【问题讨论】：

标签： javascript html ajax html-parsing

【解决方案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]);
}

创建一个假的 div 元素并附加包含 HTML 的字符串字符串会有所帮助。要在特定选择器中插入 DOM 对象，您需要使用 appendChild 方法。如果您想清空选择器然后插入 DOM，然后将 innerHTML 设置为空 (selector.innerHTML="") 然后进行追加操作。

【讨论】：

基本上我想从解析的 html 中获取选择标签并将其显示在页面上。并且有很多选择标签。那么我该如何获取呢？
请看我的编辑。我更新了我的回调函数，现在我得到了 nodelist 作为回报。现在的问题是如何在我的 html 上更新它。
我在控制台中收到此错误：未捕获的类型错误：无法在“节点”上执行“appendChild”：参数 1 不是“节点”类型。
让我们continue this discussion in chat.
document.getElementById("facilityselect").appendChild(elemToFind[0]);我尝试了这个并在控制台上检查了我可以看到我更新的结果。但是当我转到网页并下拉选择框时，我看不到更新的选择列表

【解决方案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

【讨论】：

基本上我想从解析的 html 中获取选择标签并将其显示在页面上。并且有很多选择标签。那么我该如何获取呢？
我想从所有选择标签的列表中获取特定的选择标签？
使用更具体的选择器。 select#someID。就像在 DOM 中一样。
请看我的编辑。我更新了我的回调函数，现在我得到了 nodelist 作为回报。现在的问题是如何在我的 html 上更新它。
您需要在响应中获取对象的 innerHTML，以便将其分配给 DOM 的 innerHTML。我已经更新了答案。