以 HTML 格式操作 AJAX 响应答案

【问题标题】：Manipulate AJAX response in HTML format以 HTML 格式操作 AJAX 响应
【发布时间】：2016-03-23 20:25:48
【问题描述】：

我正在使用 AJAX 请求来返回“原始”HTML 内容，然后我计划在将其呈现在页面上之前对其进行操作。 AJAX 请求返回 HTML 数据：

function AjaxTest(url){
    $.ajax({
        url: "index.aspx?" + url,
        success: function(result){gatherData(result)},
        dataType: 'html'
    });
}

然后我调用另一个名为 gatherData(result) 的函数，并将 AJAX 请求的结果作为函数参数。

function gatherData(data){
  var $data = $(data);

  tables = $data.find('body table');

此时我的tables 变量为空，但我希望它引用在 AJAX 响应正文中找到的表。有什么方法可以操作通过返回的 HTML。渲染之前的 AJAX 请求？下面是来自 AJAX 请求的 HTML 响应。我需要做的就是访问正文中的表格。

<!DOCTYPE HTML><html>
<HEAD>
<title></title>
</HEAD>
<BODY>
<TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Financial Plan</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>0</TD>
</TR><TD>12/11/2015</TD>
<TD>0</TD>
</TR><TD>13/11/2015</TD>
<TD>0</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Business Forecast</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>0</TD>
</TR><TD>12/11/2015</TD>
<TD>0</TD>
</TR><TD>13/11/2015</TD>
<TD>0</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Operational Planned</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>66358</TD>
</TR><TD>12/11/2015</TD>
<TD>65990</TD>
</TR><TD>13/11/2015</TD>
<TD>55993</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE><TABLE border=1 cellspacing=0 cellpadding=0 alignment="">
<TBODY>
<TR><TD>x-value</TD><TD>Actual</TD></TR><TD>09/11/2015</TD>
<TD>0</TD>
</TR><TD>10/11/2015</TD>
<TD>0</TD>
</TR><TD>11/11/2015</TD>
<TD>62202</TD>
</TR><TD>12/11/2015</TD>
<TD>59261</TD>
</TR><TD>13/11/2015</TD>
<TD>49119</TD>
</TR><TD>14/11/2015</TD>
<TD>0</TD>
</TR><TD>15/11/2015</TD>
<TD>0</TD>
</TR></TBODY></TABLE>

</BODY>
</HTML>

【问题讨论】：

什么，在您写的内容中，它不起作用？
它无法正常工作，tables 变量不包含任何内容。
这会帮助你stackoverflow.com/questions/17724017/…
还有数据？你可以在 Q 中编辑转储吗？
请正确写出问题？问题出在哪里？从 JSON 生成 Html ？

标签： javascript jquery html ajax

【解决方案1】：

有没有什么方法可以操作通过返回的 HTML。渲染之前的 AJAX 请求？

简而言之：是的！

怎么样？

您实际上是正确的，但部分是，您需要有一个虚拟元素来存储响应，并且该元素可用于在渲染之前操作数据，在 javascript 中可以使用 document.createElement() 和 $('<tag>',{option:option}) 可以被使用：

function gatherData(data){
  var $data  = $(data),
      tables = $data.find('table'),
      div    = $('<div>', {html:tables});



      div.find('table').each(function(){
         $(this).find('td').append('dynamicValues.')
      });

  $(document.body).append(div);

}

检查下面的sn-p：

var table = '<table><tr><td>one</td><td>two</td><td>three</td></tr></table>';

var div = $('<div>',{ html:table});

$(div).find('td').append(' dynamic values.');

$(document.body).append(div);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

您能解释一下为什么需要这样做吗？ – Manticore

当被问到这个问题时，我会说响应是一个 string 值，其中有一些 html 标签，所以直接 htmlstrings 很难操作，所以最好的方法是在如上所述的内存并将htmlstring放入其中，现在可以使用javascript来操作它，因为它现在已被放置为有效的html。

【讨论】：

您能解释一下为什么需要这样做吗？
将在答案中添加@Manticore

【解决方案2】：

你必须这样做

var table = $("body").append("<div id='dataDiv'>"+data+"</div>").find("table");

$("#dataDiv").remove();

【讨论】：