如何使用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>