Javascript 可以访问 Ajax 文本/html 响应的 DOM 吗？

Posted 2023-03-05

【中文标题】Javascript 可以访问 Ajax 文本/html 响应的 DOM 吗？

【英文标题】：Can Javascript access the DOM of an Ajax text/html response?

【发布时间】：2010-10-25 17:16:08

【问题描述】：

我正在尝试使用 Ajax 获取 html 页面，然后通过其 ID 拉出一个 div，并将该 DIV 插入当前页面。因此，当前页面（通过 Ajax）加载了第二个页面，将 div 从 Ajax 响应中拉出并插入到当前页面中。但是我很茫然，除非响应是 text/xml，否则我不能在其上使用任何 DOM 函数...可以吗？

【问题讨论】：

如果您只想要页面的 1 部分，则不需要使用 dom。你可以只拆分字符串。

【参考方案1】：

Jquery（或其他库？？）基本上会为您完成所有这些工作。我强烈建议研究这一点，不要重新发明***。

对于查询，它可能会这样：

// Make a call to url, with data 
$.ajax(
   url: $url,
    data: $data, 
    dataType: 'xml',
    callback: function(returnData)  
      // Jquery find <mytag attribute="foo">...</mytag> and store it in mydata
      var mydata = $(returnData).find('mytag[attribute=foo]');
      // Insert into current page to somewhere with class="after-me"
      $('.after-me').html(mydata);
   
);

我可能有语法错误。但这里是文档：http://docs.jquery.com/Ajax/jQuery.ajax#options

【讨论】：

问题是返回的响应是一个完整的 HTML 页面，我只想要该响应的一部分。我已经在使用原型，但我需要找到一种方法将收到的 HTML 字符串转换为 DOM 文档以便遍历它。

我不确定原型，但在 Jquery 中，这就是 $(returnData) 所做的。它接受任何 returnData ，并允许您搜索/查找/等，就好像它是页面的一部分一样。

例如可以传递一个字符串：var result = $('Link').find('a ');结果将是 DOM 对象 link

我不明白我之前做错了什么。这就像你描述的那样工作，jQuery 正在做的是用document.createElement 创建一个<div>，不将div 插入页面，将HTML 插入div 的innerHTML，并访问div 的childNodes。我发誓我试过了，但没有用……但我一定是错了，因为我刚刚尝试过，它确实有效。

感谢您的解决方案。如果您希望通过某个类或属性提取部分响应数据，请稍作更新。请试试这个。 success: function (responseHTMLData) $($(responseHTMLData).find('.className')).each(function() console.log($(this).attr('href')); );

【参考方案2】：

是的，你可以。 Here 您将找到有关如何解析 XML 响应的资源。

如果你将它加载到已经存在的 DOM 树中（innerHTML），你应该可以调用你习惯的标准 DOM 遍历函数。

【讨论】：

如果它是一个完整的文档树，我可以将它加载到innerHTML中吗？包括 什么的？

你可以，但这会使 DOM 无效。

为什么要加载整个文档树？仅加载特定零件。你已经有一棵带有 html 标签的树；为什么还要放一个呢？

@George IV，这是我的问题。我无法访问后端，我只能编写 javascript 代码，并且我正在通过 AJAX 访问一个 HTML 页面。这是一个完整的页面，我想要一种从 Ajax 响应中提取特定部分的方法。

【参考方案3】：

不用担心有效性，因为您使用 javascript 动态执行此操作，您可以使用响应数据填充隐藏元素的 innerHTML，然后使用您希望的任何 DOM/jQuery 函数

【参考方案4】：

脚本标签在任何浏览器上都会以任何方式失败。所以要访问当前页面的 dom，请在您当前请求的脚本文本上应用“eval”函数。

我的意思是，如果你有类似的 html：

<div id="content">some html</div>

你得到了服务器端的脚本文本，比如

content.innerHTML = "foo";

在 ajax 响应中使用 eval 函数

function onXmlHttpAnswer()

   if(xmlHttp.readyState==4 && xmlHttp.status==200)eval(xmlHttp.responseText);

【讨论】：

您误会了——来自服务器的响应不是 javascript。这是一个完整的 HTML 页面，我想使用 javascript 来提取该响应的一部分。

好吧，如果其他页面放在同一个域中，通过javascript创建一个iframe而不是设置它的src到你的页面，监听iframe的加载事件，你可以直接处理iframe的内容

谢谢 Tolgahan ALBAYRAK... 我可能最终会走那条路。

【参考方案5】：

要使用 jQuery 仅提取通过 $.load() 加载的 HTML 文档的一部分，请执行以下操作：

$('#dynamic').load('content.html #desiredElement');

.load 实际上会加载整个文档，但选择器会强制加载只返回该文档的选定部分。

【参考方案6】：

试试这个。这对我有用。

$.ajax(
    url: 'http://www.example.com',
    type: "GET",
    crossDomain: true,
    dataType: 'html',
    success: function (responseHTMLData)    
        $($(responseHTMLData).find('.yourClassName')).each(function() 
            console.log($(this).attr('href'));
        );
    
);

【参考方案7】：

$.ajax(
  type: "POST",
  url : "yourURL"
  data : $("#yourFormID").serialize(),
  async: true,
  success : function(resp) 
    // resp contains data in html form you want to find data in
    // <span class="error">some Error</span>
    var errorData = $(resp).find('span.error').text();   
    // errorData would have value "some Error"             
  
);