Question

所以我有一个示例页面，可以复制表格布局页面而不使用非常不便于移动的表格功能。

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

<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()，但也无济于事。

编辑2 已更新为工作代码

Answer 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>标记。

Ajax使用<script>标记</script>调用文件

1 个答案: