javascript - 在 jQuery/JS 中将文件读入字符串

Question

标题不言自明:我需要通过 jQuery 读取一个 HTML 文件并将其内容存储到一个字符串变量中。

我尝试使用 .load 和 $.get，但它们无法满足我的需求。

根据下面的评论，这是我迄今为止尝试过的代码，但它们根本没有填充我的 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);

和:

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

很奇怪为什么这不起作用。至少对我来说很奇怪。这就是我在 PHP 中填充变量的方式，因此我将相同的逻辑带到了 JS 中。也许有其他方法？

P.S:V 我也尝试了所有替代方法，比如用 += 连接并在回调函数内部分配给 = 模板，但没有任何效果。

感谢那些试图帮助我的人!

Answer 1

也许你应该尝试使用 $.ajax() 进行 AJAX 请求

检查 jQuery API here

    $.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
            }
    });

DEMO

编辑:添加了一个演示!

我重读了你的问题，我注意到你在 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!
    }
});

或

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