AJAX 响应的脚本标签位置错误答案

【问题标题】：AJAX response has script tags in wrong locationAJAX 响应的脚本标签位置错误
【发布时间】：2011-10-16 07:22:23
【问题描述】：

我在通过 AJAX 更新页面内容（结果）的网站上遇到问题。此 AJAX 返回的内容中包含一个 script 标记，该标记呈现 LinkedIN“共享”按钮。

当页面首次加载初始结果集时，布局如下所示：

这些按钮中的每一个都位于左浮动 div 中，在 Chrome 开发者工具中的 HTML 如下所示：

如您所见，script 标签出现在它应该出现的位置，在 div 中，动态生成的 span 包含按钮就在上面。

现在，当我通过 AJAX 请求附加更多结果时，事情变得有点混乱，看起来像这样：

正如您所见，LinkedIN 按钮不合适，在开发人员工具中查看 HTML 时，原因很明显：

script 标签不在代码文件中出现的 div 中，而是出现在结束 tr 标签之后 - 并且span 按钮就在上面。

那么，为什么会这样，更重要的是可以做些什么来确保 script 标签在它所属的位置，以便布局正确？

仅供参考 - body 的底部是加载 LinkedIn .js 文件的 javascript，在完成对更多结果的 AJAX 请求后，调用 LinkedIn .parse() 方法，该方法是应该解析完整的文档并呈现按钮。

编辑

应用程序是使用 ASP.NET MVC 构建的，返回的响应使用与初始页面加载相同的 .ascx 控件来格式化结果。

EDIT - 用于检索额外数据的 AJAX 请求

function LoadMore(uri, last, loader, end)
{    
    isLoading = true;
    $(loader).show();
    $.post(uri, function(data)
    {
        if (data != "") 
        {
            $(last).after(data);
            isLoading = false;
            // re-do social media share initialisation on the new AJAX-added content
            gapi.plusone.go('container');
            twttr.widgets.load();
            FB.XFBML.parse();
            IN.parse(document.body);
        }
        else
        {
            $(end).show();;
        }
        $(loader).hide();           
    });
}

编辑

从服务器返回的实际 HTML 是正确的。查看源代码会在正确的位置显示 script 标签，但在 Chrome 开发者工具中查看页面，如上图所示，会在错误的位置显示 script DOM。这发生在 IE9 和 Chrome 中。

【问题讨论】：

第二个 html 片段是服务器实际返回的片段吗？在这种情况下，可能是需要修复的服务器端代码。
没有。响应与用于在初始页面加载中显示结果的 .ascx 控件相同。
请发布您用于 AJAX 请求本身的代码。
@krisg 所以从服务器发送的代码看起来像第一个sn-p，但是当jQuery插入它时，它看起来像第二个？
Tetaxa 是的。加载页面时，页面会在 foreach 循环中呈现 5 个 .ascx 控件。当通过 AJAX 请求更多结果时，使用相同的 .ascx 控件将结果呈现给响应。如 HTML 屏幕截图所示，虽然使用了相同的控件，但 HTML 不同，脚本标签被推到了末尾。请注意，它仍然为 HTML 响应中的每个结果呈现 1 个脚本标记...因此，当 AJAX 请求要求再提供 5 个结果时，它会将脚本标记放在每次 foreach 迭代的末尾 - 而不是整个 HTML 响应的末尾.

标签： javascript jquery ajax

【解决方案1】：

您是在动态构建 html 吗？也许它与错误配置的回调有关。如果您使用 $.ajax({...})，请确保在“success:”属性中指定下一次迭代以防止无序渲染。

【讨论】：

【解决方案2】：

像这样使用 ajax 调用

$.ajax({ url: 'url',
                type: 'POST',
                data: json,
                dataType: 'json',
                contentType: 'text/html',
                success: function (data) {

                    //you response will be data


                }

            });

【讨论】：