仅在 Firefox 中的 JQuery AJAX 异常：“无法在层次结构中的指定点插入节点”（HierarchyRequestError）

Posted 2023-02-19

【中文标题】仅在 Firefox 中的 JQuery AJAX 异常：“无法在层次结构中的指定点插入节点”（HierarchyRequestError）

【英文标题】：JQuery AJAX exception only in Firefox: "Node cannot be inserted at the specified point in the hierarchy" (HierarchyRequestError)

【发布时间】：2012-07-11 13:33:30

【问题描述】：

非常奇怪的问题：我有一个由两部分组成的下拉菜单，其中选择一个州将添加第二个下拉菜单，为您提供该州的 MSA 区域列表。

这是使用对控制器的 JQuery Get 请求来完成的，该控制器返回 Select 下拉列表中的区域列表，例如

jQuery(function($) 
  // when the #area_state field changes
  $("#area_state").change(
    function() 
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data) $("#msas").html(data); 
      )
    return false;
    
  );
)

注意 -- 此代码改编自此处的教程：http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/

这在 Chrome 和 IE 中运行良好，但在 Firefox (13.0.1) 中无法运行，产生两个错误：

Error: junk after document element
Source File: http://localhost:3000/getmsas/Connecticut
Line: 2, Column: 1
Source Code:
<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

和

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point
in the hierarchy"  code: "3" nsresult: "0x80530003 (HierarchyRequestError)"  location:   
"http://localhost:3000/assets/jquery.js?body=1 Line: 6498"]

【问题讨论】：

1) #msas是什么元素？ 2）如果你alert/console.log，返回的data的值是多少？

@Utkanos: 1) #msas 是一个 id="msas" 的 div 2) 在 Chrome 中（它工作的地方），数据是 HTML，如下： 区域 选择区域（可选） 弗拉格斯塔夫，AZ option> 哈瓦苏湖城 - 金曼，亚利桑那州 更多选项

【参考方案1】：

所以我强行解决了这个问题。我还不明白为什么这个问题是 Firefox 特有的，但可能会调查一下。

我可以通过为 dataType（get 方法的最后一个参数）添加一个参数来明确地将其声明为 html 来解决此问题。

这里的 JQuery 文档中描述了获取：http://api.jquery.com/jQuery.get/

jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )

因此，有效的代码是将“html”添加为 dataType 参数：

jQuery(function($) 
  // when the #area_state field changes
  $("#area_state").change(
    function() 
      // make a call and replace the content
      var state = $('select#area_state :selected').val();
      if(state == "") state="0";
      jQuery.get(
        '/getmsas/' + state,
        function(data) $("#msas").html(data); ,
        "html"
        // ABOVE LINE IS THE FIX
      )
    return false;
    
  );
)

再次，我需要调查为什么这是 Firefox 特有的；这让我发疯了，所以希望它可以帮助别人。

【讨论】：

“html”成功了。我阅读了 HTML 文件，这些文件后来由 tempo.js 完成并附加到 DOM。

我找到了这个答案：***.com/questions/8159640/…

节省了我至少 30 分钟的暴力破解.. 谢谢哥们！

当你认为 IE 是唯一一个奇怪的孩子时......感谢@DaveGuarino 的“html”数据类型修复。也许有人会说，总是指定数据类型是个好习惯……浏览器只是在一定程度上是物理的……:)

【参考方案2】：

不确定这是否只是不完整的复制粘贴，但

<select id="area_msa" name="area[msa]"><option value="">Select Area (Optional)</option>

需要关闭 select 标签，否则你的 html 的其余部分嵌套在 select 元素中......这很糟糕。

【讨论】：

谢谢，但我认为这只是一个神器。此处显示的选项仅为默认选项；获取“数据”调用填充了更多选项，然后关闭了选择。作为参考，在 Rails 中，部分是： "选择区域（可选）" %>

有点像我想的但是...必须先说明显而易见的。我看到的唯一可能是问题的另一件事是我过去遇到过的事情......有时当您将字符串操作传递给函数时，您会得到奇怪的结果。我会尝试为 url 设置一个变量。 EX: load_to = '/getmsas/'+state 然后在你的 jQuery.get() 中使用 load_to

我找到了解决办法。查看我的回答，如果您知道为什么 Firefox 与 IE 和 Chrome 的行为不同，请告诉我。

【参考方案3】：

我只在 FF 中遇到了同样的问题。我的 Servlet 正在返回内容类型为“文本”的文本。 FF 将此解释为 text/xml 并尝试在正文中插入 xml - 因此出现错误

我将内容类型更改为 text/plain - 一切正常

【参考方案4】：

我已经解决了这个添加

header('Content-Type: text/html; charset=utf-8');

在 php 中获取文件。当标头未正确设置时，会发生错误（当从一台服务器移动到另一台服务器时，在旧服务器上它工作正常，在新服务器上工作正常，直到我设置标头）

【参考方案5】：

我遇到了同样的问题，而且只有在响应为空时才会发生这种情况，例如，我期待一个包含记录的表格，但没有任何内容可显示。