javascript 在外部文件中使用 JQuery 获取文本文件内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13478800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get text file contents using JQuery in an external file
提问by Dan
I have an external javascript file that I want to use to collect the contents of a number of text files. JQuery .get() seems the most obvious choice. I can make this work if the JQuery is in the page, but not when the JQuery is in the external file. I'm missing something hugely simple...and I am currently mixing normal javascript with JQuery in the same file which I fear is poor form.
我有一个外部 javascript 文件，我想用它来收集许多文本文件的内容。JQuery .get() 似乎是最明显的选择。如果 JQuery 在页面中，我可以完成这项工作，但当 JQuery 在外部文件中时则不行。我错过了一些非常简单的东西......我目前正在将普通的 javascript 与 JQuery 混合在同一个文件中，我担心这是糟糕的形式。
All files I am trying to access are within the same file structure. Currently I have the following in my external .js:
我试图访问的所有文件都在相同的文件结构中。目前我的外部 .js 中有以下内容：
function addPanels() {
// eventually loop over list of local HTML files
// and do some stuff with the results...
fileContents = readHTMLFile();
}
jQuery(function($){
readHTMLFile = $.get('../html/test.html', function(data) {
alert('Loaded something');
return(data);
});
});
My HTML page contains the following:
我的 HTML 页面包含以下内容：
<script type="text/javascript">
$(document).ready(function(){
addPanels();
});
</script>
Pretty sure this is a RTFM moment so direction towards the right manual/tutorial would be great!
很确定这是一个 RTFM 时刻，所以朝着正确的手册/教程的方向会很棒！
Dan
担
回答by Code-Source
In your script "readHTMLFile" is not known by function "addPanels", you should put them in same level.
在您的脚本中，函数“addPanels”不知道“readHTMLFile”，您应该将它们放在同一级别。
This script should works
这个脚本应该可以工作
<script type="text/javascript">
(function($){
var readHTMLFile = function(url){
var toReturn;
$.ajax({
url: url,
async: false
}).done(function(data){
toReturn = data;
});
return toReturn;
};
$.addPanels = function(url){
fileContents = readHTMLFile(url);
};
})(jQuery);
</script>
And in your page you can call it like that:
在您的页面中，您可以这样称呼它：
<script type="text/javascript">
$(document).ready(function(){
$.addPanels('../test/test.html');
});
</script>
回答by nekman
The jQuery.getis a asynchronous function, with a callback that executes when the server returns the requested document. Therefore, you cannot return any data from the method.
这jQuery.get是一个异步函数，带有一个回调，当服务器返回请求的文档时执行。因此，您不能从该方法返回任何数据。
function addPanels() {
// will not work
fileContents = readHTMLFile();
}
...
readHTMLFile = $.get('../html/test.html', function(data) {
// will not work
return(data);
});
This however, will work:
但是，这将起作用：
var addPanelCallback = function(html) {
// append html (or something like that)
alert(html);
};
var addPanel = function(url) {
$.get(url, addPanelCallback);
};
addPanel('../html/test1.html');
addPanel('../html/test2.html');
Example: http://jsfiddle.net/FgyHp/
