Question

我正在使用AJAX请求返回＆＃39; raw＆＃39; 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 var为空，但我希望它能引用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>

Answer 1

有没有办法操纵通过返回的HTML。渲染之前的AJAX请求？

简而言之：是的！

如何？

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

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);

}

检查以下代码段：

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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

Answer 2

你必须这样做

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

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

以HTML格式处理AJAX响应

2 个答案: