Ajax 调用带有 <script> 标记的文件答案

【问题标题】：Ajax call to file with <script> tagsAjax 调用带有 <script> 标记的文件
【发布时间】：2013-03-01 10:33:20
【问题描述】：

所以我有一个示例页面，它可以在不使用非常不适合移动设备的表格功能的情况下复制表格布局页面。

基本上我有一个看起来像这样的页面：

<html>
    ...
    <body>
    <div type="page">
        <div class="header">
        </div> <!-- /header -->
        <div class="body">
            <script type="text/javascript">
                                $(document).ready(function() {
                                $(".header").load("/common/header.html");
                                $(".body").load("/Example/example-home.html");
                                //Call to superclass function to replace contents after load
                    });
                /*$(document).ready(function() {
                    $.ajax({
                        url: "/Example/example-home.html",
                    }).done(function (data) {
                        $(".body").append(data);
                    });
                });*/
            </script> -->
            </div> <!-- /body -->
        </div class="footer">
        </div> <!-- /footer -->
    </div> <!-- /page -->
</body>
</html>

通过 ajax 调用的文件如下所示：

    <style>
    /* Various CSS Stylings */
    </style>
    <script type="text/javascript">
        /*Populate our scripts upon ajax request
        var sList[0] = ["Color Mutate", "Versatile, Schemebale, string mutation script. Format your text in any color scheme you can dream.", "1.2.0"];
        $(document).ready(function() {
            if (!sList) {
                $(".table").html("<p>No hosted scripts found</p>");
            } else {
                for (var i = 0;i<=sList.length;i++) {
                    $(".script").append(sList[i][0]);
                    $(".desc").append(sList[i][1]);
                    $(".version").append(sList[i][2]);
                }
            }
        }); */ 
                    // moved to main.js
    </script>
    <div class="table">
        <div class="script">
        </div>

        <div class="desc">
        </div>

        <div class="version">
        </div>
    </div> <!-- /table -->

在 firebug 中查看 ajax 调用成功，结果输出看起来与 example-home.html 文件相同，但之后浏览器在 <div class="body"></div> 部分没有显示任何内容。

我担心这是 ajax 调用的异步性质的问题，但似乎无法找到可行的解决方案。

编辑我也尝试过使用$(this).append() 而不是如上所示的$(".body").append()，但也无济于事。

EDIT 2更新为工作代码

【问题讨论】：

在这里查看我的答案stackoverflow.com/questions/15148037/…
为什么 div.body 中有 javascript 而不是页面末尾？
@Josh Sigh，我想我无法像我希望的那样模块化。我想我会把它放到我的基类中并在加载后执行它
@popnoodles 只是让我以后添加新界面时更容易找到。
试试$(".body").load("/Example/example-home.html");

标签： javascript jquery ajax

【解决方案1】：

您的第二页中有几个错误：$(document).ready({...}); 必须是 $(document).ready(function(){...}); 并且var sList[0] = [...]; 应该是sList[0] = [...];，并且还应该有一个var sList=[]; 声明，可能在第一页中。

然后，在第一页，添加dataType: 'text'，你可能会发现它工作正常

$(document).ready(function() {
    $.ajax({
        url: "/Example/example-home.html",
        dataType: 'text'
    }).done(function (data) {
        $(".body").append(data);
    });
});

哦，从您异步加载的页面中删除<html> 标记。

【讨论】：

点头，我刚刚在搜索时修复了错误。现在使用 .load() 和超类级别的 mod 函数的组合能够让它工作。我已接受您的回答，因为它与我的最终解决方案相当接近。感谢您的帮助。