如何使用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调用获取了3个模板，然后您将模板缓存在本地存储中，然后使用该模板呈现网页的3个部分。

这是您做错了的事情。 代码的呈现部分全部一起写在window.load中，并不关心AJAX调用是否完成。 由于您的调用是异步的，因此代码不会等到获取响应模板后再等待。

您可以做的是拥有一个通用的渲染函数，每个ajax调用成功方法都可以调用该函数。

Answer 2

您正遭受异步问题的困扰，您应该在每个请求中进行工作。 我不认为它与本地存储有关。

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

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



});

Answer 3

那是因为您使用的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>