如何使用Javascript加载文件的内容并在其中插入变量

How to load the contents of a file and insert a variable in it using Javascript?

本文关键字：在其中 插入 变量 何使用 Javascript 加载 文件      更新时间：2023-09-26

我正在使用以下jQuery方法向div添加一些html:

$('#pageTabContent').append($(''
                    <div class="tab-pane" id="'+ticketId+'">'
                        And a whole lot more html here..
                    </div>'));

这工作得很好，但因为我有太多的html在我的javascript我想把它移动到一个单独的文件。问题是，我还需要在html中插入ticketId。是否有一种方法使用Javascript/jQuery加载html从一个单独的文件，但仍然插入ticketId在它?

[EDIT]请注意，每次使用这段代码，ticketId都是不同的。我将在一个页面加载中多次使用，所以我不能使用php在html中加载ticketId。必须在客户端完成。

欢迎所有提示!

对于特定的示例，它非常简单:

$.get("/path/to/file.html", function(html) {
    var newStuff = $(html);
    newStuff.find("div.tab-pane:first").attr("id", ticketId);
    newStuff.appendTo("#pageTabContent");
});

你可以概括一下，基本的概念是:1。2.加载HTML。使用jQuery从它创建DOM元素。3 .使用jQuery查找有问题的元素并修改它。添加到元素

另一种方法是使用某种形式的模板，要么是模板插件，要么只是DIY:

$.get("/path/to/file.html", function(html) {
    html = html.replace("{{ticketId}}", ticketId);
    $("#pageTabContent").append(html);
});

同样，有插件和模板系统可以为你做这些，它们会提供各种各样的功能，而不是你自己做。

我一般建议避免在javascript中动态生成html。有几个很好的基于模板的框架。我喜欢在KnockoutJS中使用http://knockoutjs.com/

这种方法的另一个好处是模型和html元素之间的更改跟踪。
相关文章：