如何使用jquery從html加載div？

我做了3個導航navbarheader.html，navbar.html和sidebar.html.Only navbarheader.html正在加載，但其他未加載。如果我刪除navbarheader.html navbar.html正在加載。如何使用jquery從html加載div？

<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>

來源

2017-01-01 Penguen

那是因爲你正在使用ajax請求，這代表了異步JavaScript和XML，但可與其它數據類型（如文本，因此JSON）來使用，所以在這裏你找回navbarheaderData線， navbarData和在啓動請求後立即執行，這可以解釋爲什麼只有第一個請求會加載（因爲在開始呈現數據之前，第一個人只有時間獲得響應）。

你真正想要的是

<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>

來源

2017-01-01 18:34:16 JCharante

嗨;我再次重寫我的問題。請看上面。 – Penguen

@Penguen更新了我的回答 – JCharante

不，您正在做同樣的事情，我們需要改善ajax異步問題。感謝您的關注。 – Penguen

從我所看到的，我看到3個模板是通過使AJAX調用，然後你在你的本地存儲緩存的模板，然後用它來使您的網站的3個部分取頁。

這是你做錯了什麼。代碼的渲染部分全部寫在window.load中，並且不關心AJAX調用是否完成。由於您的調用是異步的，代碼將不會等到獲取響應模板爲止。

你可以做的是有一個共同的渲染功能，每個ajax調用成功方法可以調用。

來源

2017-01-01 18:30:16 Yasser

嗨;我再次重寫我的問題。請看上面。 – Penguen

您正在遭受異步問題，您應該在每個請求中完成這項工作。我不認爲它與本地存儲相關。

<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... 



});

來源

2017-01-01 18:30:47

我重寫了解決方案，因爲沒有首先獲得本地存儲的目的。 –

嗨;我再次重寫了我的問題。請看上面 – Penguen

如何使用jquery從html加載div？

回答

相關問題