如何使用在主體部分而不是頭部部分中加載的jQuery進行ajax調用

Question

我有一個布局文件，其中在關閉標簽之前就包含了Jquery。

//layout.handlebars
<!DOCTYPE html>
<html>
  <head></head>
   <body>
    {{{body}}} // renders the body content
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

我也有特定於頁面的javascript（helper.js），它可以進行Ajax調用。

<div>Some sample data</div>
<script src="/js/helper.js"></script>

但是這里的問題是在頁面末尾加載了jquery，但是我在加載jquery之前在外部javascript中引用了它。 這表明我沒有定義“ $”，我知道這是顯而易見的。

一種解決方案就像將jquery添加到頭部，但這不是我想要的。

有沒有什么方法可以應用在不將Jquery移至頭部的情況下從外部文件進行ajax調用。

任何幫助深表感謝！！

Answer 1

有沒有什么方法可以應用在不將Jquery移至頭部的情況下從外部文件進行ajax調用。

是的，我想您已經了解問題的原因。 正如您在下面看到的，最終內容是..

<!DOCTYPE html>
<html>
  <head></head>
   <body>
    <div>Some sample data</div>
    <script src="/js/helper.js"></script>  <!--Jquery is not loaded yet, and hence $ is undefined -->
    <script src='/js/jquery-2.2.4.min.js'></script>    
   </body>
</html>

如您所知，一個選擇是將jquery移動到HTML中的任何位置，但要確保先加載jquery，然后再加載其他依賴於jquery的文件。 現在，既然您不想采用此選項。 我們還有另一種選擇。

解決方案：我們的唯一目的是確保先加載jquery庫，然后再加載其他依賴於jquery的文件。

我們可以使用$ .getScript（）獲取document.ready上的document.ready

$(function(){
 $.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {      
  console.log( "Load was performed." );
 });
});

附加功能：如果您覺得這很麻煩，並且不能將此代碼添加到頁面中的所有文件中（因為可能有太多文件），則可以編寫泛型函數和全局數組變量，此函數將檢查文件數組中的所有路徑，並同步執行每個數組，然后從數組中刪除。 確保在每個document.ready事件中都調用此泛型函數。

Answer 2

一種解決方案是，您可以將jquery腳本放在{{{body}}}部分之前的body標簽的開頭。.這樣，您的助手腳本將在jquery之后呈現，並且您的問題將得到解決......

Answer 3

好吧，它不是很漂亮，但是您可以使用某種測試並等待循環，例如

<script>
(function test(){
  if(  window.jQuery ){
    //your jQuery code
  } else {
    setTimeout(function(){ test(); }, 200);
  }
})
</script>

如何使用在主體部分而不是頭部部分中加載的jQuery進行ajax調用

問題描述

3 個解決方案

解決方案1
1 已采納 2016-12-14 10:28:38

解決方案2
0 2016-12-14 10:29:11

解決方案3
0 2016-12-14 10:29:59

如何使用在主體部分而不是頭部部分中加載的jQuery進行ajax調用

問題描述

3 個解決方案

解決方案1 1 已采納 2016-12-14 10:28:38

解決方案2 0 2016-12-14 10:29:11

解決方案3 0 2016-12-14 10:29:59

解決方案1
1 已采納 2016-12-14 10:28:38

解決方案2
0 2016-12-14 10:29:11

解決方案3
0 2016-12-14 10:29:59