来自 JavaServlet 的 HTML 字符串在 Javascript 中解释为 #document 而不是字符串答案

【问题标题】：HTML string from JavaServlet interpreted as #document in Javascript instead of string来自 JavaServlet 的 HTML 字符串在 Javascript 中解释为 #document 而不是字符串
【发布时间】：2012-05-22 14:39:56
【问题描述】：

我们有一个 JavaServlet 正在运行，它为我们提供所需的数据。问题在于 Jquery 解释这些数据的方式。

信息通过响应编写器发送。（例如：消息）

protected void doPost(HttpServletRequest request,
    HttpServletResponse response)
        throws ServletException {

    String body = "";
    for (Message msg : messages) {
        body += "<div class=\"Message\" id=\"" + msg.getId() + "\">"
            + *inner information*
            + "</div>";
    }
    response.getWriter().write(body);
}

通过Ajax请求获取信息

$.ajax({
    type: 'POST',
    url: 'message.jsp',
    data: { *Needed data* },
    success: function(data) {
        $('#element').append(data);
    }
});

这有时有效，有时无效。所以我们在 chrome 中检查了控制台，让代码在附加行停止。当发送多条消息时，成功函数中的“数据”被解释为一个大字符串，

"<div class="message" id="153" onclick="loadFullMessage(153)"></div>
<div class="message" id="154" onclick="loadFullMessage(154)"></div>
<div class="message" id="155" onclick="loadFullMessage(155)"></div>
<div class="message" id="156" onclick="loadFullMessage(156)"></div>
"

但当仅发送 1 条消息/div 时，它会被解释为“#document”对象。

#document
    <div class="message" id="174" onclick="loadFullMessage(174)">…</div>

可以在 chrome 控制台中看到该消息，但是在附加以下错误时遇到“未捕获错误：HIERARCHY_REQUEST_ERR:DOM Exception 3”。

数据如何总是被解释为字符串而不变成文档对象？

【问题讨论】：

在ajax请求中加入“dataType: 'html'”解决...

标签： jquery

【解决方案1】：

@boblail 是对的 - 将 dataType 更改为 ajax 即可。但是，您有时会使用您不打算修改的第三方库。就我而言，它是 JQuery UI。

发送Content-Type: application/xhtml+xml 会导致 JQuery 从响应中构建一个 DOM 文档。将您的 Content-Type 设置为 text/html 就可以了。

【讨论】：

【解决方案2】：

我刚刚通过在ajax 调用中添加dataType 解决了一个非常相似的问题：

$.ajax({
  type: 'POST',
  url: 'message.jsp',
  data: { *Needed data* },
  success: function(data) {
    $('#element').append(data);
  }
});

另请参阅这两个 StackOverflow 答案：

【讨论】：