如何使用在主体部分而不是头部部分中加载的jQuery进行ajax调用
[英]how to make an ajax call with jquery loaded in the body section not head section
问题描述
I have a layout file where i included Jquery just before closing tag. 
我有一个布局文件，其中在关闭标签之前就包含了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>
I also have a page specific javascript(helper.js) that makes an Ajax call. 我也有特定于页面的javascript（helper.js），它可以进行Ajax调用。
<div>Some sample data</div>
<script src="/js/helper.js"></script>
but the problem here is jquery is loaded at the end of the page but i am referring to it in the external javascript before jquery is loaded. 但是这里的问题是在页面末尾加载了jquery，但是我在加载jquery之前在外部javascript中引用了它。 which shows me '$' is not defined and i know that is obvious. 这表明我没有定义“ $”，我知道这是显而易见的。
One solution to this will be like adding jquery to the head section but that is not what i want. 一种解决方案就像将jquery添加到头部，但这不是我想要的。
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section. 有没有什么方法可以应用在不将Jquery移至头部的情况下从外部文件进行ajax调用。
Any help is much appreciated!! 任何帮助深表感谢！！
3 个解决方案
解决方案1
1 已采纳 2016-12-14 10:28:38
Is there any approach that i can apply to make an ajax call from external file without moving Jquery to head section.
Yes, I assume you already understand the cause of the issue. 是的，我想您已经了解问题的原因。 As you see below the final content is .. 正如您在下面看到的，最终内容是..
<!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>
As you already know one option is to move jquery anywhere in the HTML but make sure its loaded before any other jquery dependent files. 如您所知，一个选择是将jquery移动到HTML中的任何位置，但要确保先加载jquery，然后再加载其他依赖于jquery的文件。 Now since you don't want to take this option. 现在，既然您不想采用此选项。 we have another option. 我们还有另一种选择。
Solution: Our only aim is to make sure the jquery library is loaded prior to any other jquery dependent files. 解决方案：我们的唯一目的是确保先加载jquery库，然后再加载其他依赖于jquery的文件。
We can get the files on document.ready using $.getScript() 我们可以使用$ .getScript（）获取document.ready上的document.ready
$(function(){
$.getScript( "/js/helper.js", function( data, textStatus, jqxhr ) {
console.log( "Load was performed." );
});
});
Extras: If you feel this is a overhead and you cannot add this code to all the files in your page (since there can be too many files ), You can write a generic function and a global array variable , This function will check for file paths in the array and execute each one synchronously and remove from the array. 附加功能：如果您觉得这很麻烦，并且不能将此代码添加到页面中的所有文件中（因为可能有太多文件），则可以编写泛型函数和全局数组变量，此函数将检查文件数组中的所有路径，并同步执行每个数组，然后从数组中删除。 Make sure this generic function is called in every document.ready event. 确保在每个document.ready事件中都调用此泛型函数。
解决方案2
0 2016-12-14 10:29:11
一种解决方案是，您可以将jquery脚本放在{{{body}}}部分之前的body标签的开头。.这样，您的助手脚本将在jquery之后呈现，并且您的问题将得到解决......
解决方案3
0 2016-12-14 10:29:59
Well its not pretty but you could use some kind of test and wait loop something like 好吧，它不是很漂亮，但是您可以使用某种测试并等待循环，例如
<script>
(function test(){
if( window.jQuery ){
//your jQuery code
} else {
setTimeout(function(){ test(); }, 200);
}
})
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.