javascript - 如何使用 jquery 从 html 加载 div？

Question

我制作了 3 个导航 navbarheader.html、navbar.html 和 sidebar.html。只有 navbarheader.html 正在加载，其他的没有加载。如果我删除 navbarheader.html navbar.html 正在加载。

    <script type="text/javascript">
    // let $ = requirejs('./jquery.min.js');
    //mainWindow.$ = $;
    $(document).ready(function () {


        var navbarheaderData = localStorage.getItem('navbarheaderStorage');
        if (navbarheaderData) {
            $('#navbarheader1').html(navbarheaderData);
        } else {
            $.ajax({
                url: 'navbarheader.html',
                dataType: 'text',
                success: function (data) {
                    localStorage.setItem('navbarheaderStorage', data);
                    $('#navbarheader1').html(data);

                    var navbarData = localStorage.getItem('navbarStorage');
                    if (navbarData) {
                        $('#navbar1').html(navbarData);
                    } else {
                        $.ajax({
                            url: 'navbar.html',
                            dataType: 'text',
                            success: function (data) {
                                localStorage.setItem('navbarStorage', data);
                                $('#navbar1').html(data);
                                var sidebarData = localStorage.getItem('sidebarStorage');
                                if (sidebarData) {
                                    $('#sidebar1').html(sidebarData);
                                } else {
                                    $.ajax({
                                        url: 'sidebar.html',
                                        dataType: 'text',
                                        success: function (data) {
                                            localStorage.setItem('sidebarStorage', data);
                                            $('#sidebar1').html(data);
                                        }
                                    });
                                }


                            }
                        });
                    }


                }
            });
        }

    });
</script>

Answer 1

那是因为您正在使用 ajax 请求，它代表异步 JavaScript 和 XML，但可以与其他数据类型(如文本和 json)一起使用，所以您检索 的行navbarheaderData、navbarData 和 sidebarData 在您启动请求后立即执行，这可以解释为什么只有第一个会加载(因为只有时间在您开始呈现数据之前第一个得到响应的人)。

你真正想要的是

<script type="text/javascript">
$(document).ready(function () {

    $.ajax({
        url: 'navbarheader.html',
        dataType: 'text',
        success: function (data) {

            localStorage.setItem('navbarheaderStorage', data);
            //console.log(localStorage.getItem('navbarheaderStorage'));
            var navbarheaderData = localStorage.getItem('navbarheaderStorage');
            $('#navbarheader1').html(navbarheaderData);

        }
    });
    $.ajax({
        url: 'navbar.html',
        dataType: 'text',
        success: function (data) {
            localStorage.setItem('navbarStorage', data);
            //console.log(localStorage.getItem('navbarStorage'));
            var navbarData = localStorage.getItem('navbarStorage');
            $('#navbar1').html(navbarData);

        }
    });
    $.ajax({
        url: 'sidebar.html',
        dataType: 'text',
        success: function (data) {
            localStorage.setItem('sidebarStorage', data);
            //console.log(localStorage.getItem('sidebarStorage'));
            var sidebarData = localStorage.getItem('sidebarStorage');
            $('#sidebar1').html(sidebarData);


        }
    });

});
</script>

如果您不需要使用本地存储，可以简化为以下内容。

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        url: 'navbarheader.html',
        dataType: 'text',
        success: function (data) {
            $('#navbarheader1').html(data);

        }
    });
    $.ajax({
        url: 'navbar.html',
        dataType: 'text',
        success: function (data) {
            $('#navbar1').html(data);

        }
    });
    $.ajax({
        url: 'sidebar.html',
        dataType: 'text',
        success: function (data) {
            $('#sidebar1').html(data);
        }
    });
});
</script>

@Penguen 回复并更改了他们上面的代码。

我看到您不想发送 ajax 请求，除非您需要，这是一种奇怪的缓存机制。在这种情况下，按照您编写的方式，我们只缓存了 navbarHeaderData 而没有缓存其他内容，那么页面将无法正确呈现。下面的方法不仅可以防止我所说的，而且比重写的方法更快，就像你第一次加载它并且没有缓存它一样，然后 ajax 请求几乎会在同时，而不是一个接一个。

<script type="text/javascript">
// let $ = requirejs('./jquery.min.js');
//mainWindow.$ = $;
$(document).ready(function () {
    var navbarheaderData = localStorage.getItem('navbarheaderStorage');
    if (navbarheaderData) {
        $('#navbarheader1').html(navbarheaderData);
    } else {
        $.ajax({
            url: 'navbarheader.html',
            dataType: 'text',
            success: function (data) {
                localStorage.setItem('navbarheaderStorage', data);
                $('#navbarheader1').html(data);
            }
        });
    }

    var navbarData = localStorage.getItem('navbarStorage');
    if (navbarData) {
        $('#navbar1').html(navbarData);
    } else {
        $.ajax({
            url: 'navbar.html',
            dataType: 'text',
            success: function (data) {
                localStorage.setItem('navbarStorage', data);
                $('#navbar1').html(data);
            }
        });
    }

    var sidebarData = localStorage.getItem('sidebarStorage');
    if (sidebarData) {
        $('#sidebar1').html(sidebarData);
    } else {
        $.ajax({
            url: 'sidebar.html',
            dataType: 'text',
            success: function (data) {
                localStorage.setItem('sidebarStorage', data);
                $('#sidebar1').html(data);
            }
        });
    }

});
</script>