以HTML格式操作AJAX响应

Manipulate AJAX response in HTML format

本文关键字：AJAX 响应 操作 格式 HTML      更新时间：2023-09-26

我使用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>

是否有任何方法可以操作通过返回的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);
}

查看下面的片段：

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标记，所以直接地，html字符串很难操作，所以最好的方法是在内存中创建一个伪元素，如上所述，并将html字符串放在其中，现在可以使用javascript来操作它，因为它现在已经被放置为有效的html。

你必须像一样

var table = $("body").append("<div id='dataDiv'>"+data+"</div>").find("table");
$("#dataDiv").remove();
相关文章：