在 jQuery 中使用 AJAX 返回数据更新 DOM 元素失败答案

【问题标题】：Updating DOM element with AJAX return data fails in jQuery在 jQuery 中使用 AJAX 返回数据更新 DOM 元素失败
【发布时间】：2009-10-09 04:28:49
【问题描述】：

我正在使用 jQuery 向我网站上的另一个页面发送一个简单的 AJAX 发布请求，以获取 XML 文档响应。我将响应放入启用了语法突出显示的pre 元素中。响应很好（我可以alert 它），但是当我尝试使用 jQuery 在handlResponse 函数中分配它时，它没有被添加到pre 元素中。

<head>
<script>
   ...
   function handleResponse(response, status)
   {
      $("#output").text(response);
   }
   $.post(url, data, handleResponse, "text");
   ...
</script>
</head>

...

<pre id="output">
</pre>

为了清楚起见，上面的 javascript 代码在 jQuery 的文档就绪函数中。任何帮助都将不胜感激。

【问题讨论】：

顺便说一句，如果我不得不猜测一件事，那就是将回调更改为handleResponse()，但我总是搞砸何时使用 () 以及何时将它们排除在外在 js 中，所以我总是先做错一个......
你能给我们一个响应文本的样本吗？我刚刚在 jsbin.com 中运行了一个模拟，它适用于我的示例
对不起，很遗憾，这个问题与 jquery 和 ajax 无关。请参阅下面的答案。我必须等待几天才能接受它，很抱歉造成混乱。

标签： html xml jquery

【解决方案1】：

三件事：

响应是否正确传递？通过从函数本身发出响应警报来检查。
函数调用是否正确？通过让它发出与响应变量 (alert("Yo!")) 无关的警报来检查。
文本是否正确插入？我可以说它应该可以工作，但是为了完全调试，添加一个像这样的三元组：
```
var preText = (response != "") ? response : "The problem is with the reponse";
```

【讨论】：

我没有在上面的问题中添加调试，但是我已经完成了字符串警报以及警报响应，并且都可以正常工作。
在函数本身内？那部分是关键。该函数被调用并喜欢变量等......
您可以在text() 中设置其他内容，它会以响应方式显示吗？
哦，只是为了咯咯笑，尝试在文本设置为响应后添加这个...alert($("#output").text()); 如果它仍然显示响应，也许问题只是一些疯狂的东西，就像 pre 是隐藏。

【解决方案2】：

尝试使用html 而不是text...

$("#output").html(response);

编辑：如果您认为转义是问题所在，以下内容应该足以很好地转义以显示...

response = response.replace(/</g, "&lt;");
$("#output").html(response);

【讨论】：

问题是我需要转义响应，因为它是 XML 并且会被不正确地添加到 pre 元素中。
为了确保我没有发疯，我试过了，但它也不起作用。

【解决方案3】：

显然这是一个不好的问题。我正在使用 javascript 库 SyntaxHighlighter 并在我尝试使用的 pre 标记上预加载了突出显示的语法。我的解决方案是删除标记并在 ajax 响应进入时动态创建它。除了我试图确定如何在动态附加的 dom 元素上加载突出显示之外，这效果很好。

感谢您的回复。

【讨论】：