javascript 将文件读入 jQuery/JS 中的字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20400076/
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
Reading a file into a string in jQuery/JS
提问by aborted
The title is quite self-explanatory: I need to read a HTML file through jQuery and store its contents into a string variable.
标题一目了然：我需要通过 jQuery 读取 HTML 文件并将其内容存储到字符串变量中。
I tried using .loadand $.get, but they wouldn't do what I needed.
我尝试使用.loadand $.get，但他们不会做我需要的。
This is the code I've tried so far, based on the comments below, but they didn't populate my templatevariable at all:
这是我迄今为止尝试过的代码，基于下面的评论，但它们根本没有填充我的template变量：
var template = "";
$.ajax({
url: 'includes/twig/image_box.twig',
type: 'get',
success: function(html) {
var twig = String(html);
template.concat(twig);
}
});
console.log(template);
AND:
和：
var template = "";
var fileUrl = "includes/twig/image_box.twig";
jQuery.get(fileUrl).then(function(text, status, xhr){
var html = String(text);
template.concat(html);
// console.log(html); // WORKS!
});
console.log(template); // Does not work
It's weird why this isn't working. Weird for me at least. This is how I'd populate a variable in PHP so I've carried the same logic to JS. Maybe there is an alternative way?
这很奇怪为什么这不起作用。至少对我来说很奇怪。这就是我在 PHP 中填充变量的方式，所以我对 JS 执行了相同的逻辑。也许有另一种方法？
P.S:V I've also tried all alternative ways, like concatenating with +=and assigning inside the callback function to template with =, but nothing worked.
PS:V 我也尝试了所有替代方法，比如+=在回调函数中连接和分配给模板 with =，但没有任何效果。
Thanks to the ones who are trying to help me!
感谢那些试图帮助我的人！
回答by Cald
Maybe you should try a AJAX request with $.ajax()
也许你应该用 $.ajax() 尝试一个 AJAX 请求
Check the jQuery API here
在此处检查 jQuery API
$.ajax({
url: 'yourHTMLfile.html',
type: 'get',
async: false,
success: function(html) {
console.log(html); // here you'll store the html in a string if you want
}
});
EDIT: Added a demo!
编辑：添加了一个演示！
I reread your question and I noticed you're calling the console log right above the ajax request but you forgot the ajax is asynchronous that means the page will do a request and only will set the template value when the response return with success(if it returns). So the console.log(template) don't appears because it may be not loaded yet.
我重新阅读了您的问题，我注意到您正在 ajax 请求正上方调用控制台日志，但您忘记了 ajax 是异步的，这意味着页面将执行请求，并且只有在响应成功返回时才会设置模板值（如果它返回）。所以 console.log(template) 不会出现，因为它可能还没有加载。
var template = "";
$.ajax({
url: 'includes/twig/image_box.twig',
type: 'get',
success: function(html) {
var twig = String(html);
template.concat(twig);
console.log(template); // the change!
}
});
or
或者
$.ajax({
url: 'includes/twig/image_box.twig',
type: 'get',
async: false,
success: function(html) {
var twig = String(html);
template.concat(twig);
}
});
console.log(template); // the change!
回答by Mehran Hatami
You can try this:
你可以试试这个：
//as you see I have used this very page's url to test and you should replace it
var fileUrl = "/questions/20400076/reading-a-file-into-a-string-in-jquery-js";
jQuery.get(fileUrl).then(function(text, status, xhr){
//text argument is what you want
});
and if it won't work try if your browser can open the file. if it could you'd better try ajax method in jQuery if not you might have some problems regarding permissions or somethings like that in you application server.
如果它不起作用，请尝试您的浏览器是否可以打开该文件。如果可以，您最好在 jQuery 中尝试 ajax 方法，否则您可能在应用程序服务器中遇到有关权限或类似问题的一些问题。
