jquery - 无效的 ajax 内容

Question

我正在加载一个评论列表，并尝试用新加载的列表替换我当前在我的 html 页面上的列表。

以前，我的版本是加载列表(这是简单的 xml)，遍历其元素并生成我的内容。 它运行良好，但我必须逐个迭代和创建元素，而 xml 的东西除了调试之外没有用。

现在，我正在尝试更改 xml 页面，以便我们可以将其作为 html(独立)或 xml(用于 ajax 需求，即仅核心内容)查看。

我这样替换它:

// ajax call to populate the comments
    $.ajax({
        type: 'GET',
        url: 'flow/' + target,
        dataType: 'xml',
        success: function(xml){
                var list = $(xml).find('#flow');

                // var $list = $layer.find('#flow');
                // $list.children().remove();
                // we process it for events :
                //  --to implement--

                // we simply replace the list
                $layer.find('#flow').replaceWith(list);

                // update the scrollpane
                updateScrollPane();
        },
        error: function(xhrq, status, code){
            formError('Could not load the comments.<br />Error with xhr : status=' + status + ', code=' + code);
            // and we log it
            log('Error with xhr : status=' + status + ', code=' + code);
            updateScrollPane();
        }
    });

但问题是它被正确插入，但它被浏览器视为 xml，因此样式无法正常工作。

即这是一个可能被加载的列表:

<?xml version="1.0"?>
            <ul id="flow" path="2012/grammont" target="IMG_9610.JPG" valid="false">
<!-- no comment yet, be the first ! -->
                <li class="no-comment" />
<!-- Log : 
New FlowDB(2012/grammont/flow.db, IMG_9610.JPG)
 -->
            </ul> <!-- end of the real content -->

我想我的问题是它被 jquery 错误地解释为 xml(但我使用了 $(xml).find('#flow')，所以它应该只获取 DOM 元素并将 xml header 放在一边。 .).

目前，正确的 li 元素是 HTMLLIElement 对象，而我插入的是简单类型 Element(即不被浏览器解释)。

我如何确保浏览器将其作为 html 而不是来自 xml 的混合元素获取？

编辑:

如果我尝试生成没有 xml header 的简单 html，并在没有dataType(或 dataType: 'html')的情况下加载它，结果会更糟，因为我当前的列表已删除，没有任何内容可以替换它...

Answer 1

XML 元素与 HTML 元素不同(当插入到 DOM 中时，它们实际上携带一个空的 xmlns 属性，因此浏览器不会将它们视为可设置样式的 HTML 元素，即使节点名称看起来是一样的)。

由于您正在处理 HTML 数据，因此您应该指示 jQuery 将标记加载为 HTML，而不是 XML:

$.ajax({
    type: "GET",
    url: "flow/" + target,
    dataType: "html",
    // ...
});

也许可以使用 HTML5 数据属性，这样您就可以在标记中嵌入额外的信息而不会使其无效:

<ul id="flow" data-path="2012/grammont"
    data-target="IMG_9610.JPG" data-valid="false">