javascript - 将 HTML 放入 Javascript 源中还是使用 AJAX 检索 HTML？

Question

我的应用程序有消息框，比如 Facebook 上的消息框，我制作的它们运行得很好，但我开始不喜欢我实现消息框某些部分的方式。

每个消息框都有一个标题栏、标题栏中的标题以及用于关闭该框的可选“X”按钮。每次创建一个框时，每个框都有一个默认的正文(<p> 消息元素和一个关闭按钮)，但您可以将任何 HTML 放入框的正文中，这就是我不确定的地方。

如果您忘记了密码，请在我的登录页面上单击“忘记密码？”文本消息框出现，框的主体是自定义 HTML(电子邮件地址的输入字段和提交按钮)，并且该 HTML 是在我创建框时从 Javascript 源获取的。

示例:

....
....
var bodyHTML = 'Custom HTML for the body of this box';
var options = {'title': 'Password Recovery', 'bodyHTML': bodyHTML, 'hideBigCloseButton': true, 'removeOnClose': true};
createMessageBox('password-recovery-box', options, callback);

到这个应用程序结束时，我肯定会得到至少 7 或 8 个消息框，其中框的主体具有自定义 HTML，它可能只有 10 行 HTML，也可能是 50 行，但我没有就像将如此多的 HTML 分散在 Javascript 文件源中的想法一样。

我正在考虑使用 jQuery 向应用程序中的 Controller 发送 GET 请求 (site.com/ajax/load-box-template/recover-password)，这会给我返回用于放入的 HTML自定义消息框的主体？

后一种方法是不是太过分了或者比第一种方法更好？两者都可以，但哪一个更好？或者也许有比我提到的两种方法更好的方法？

任何帮助都会非常感谢。

Answer 1

您可以使用 $.load() 函数从消息框中加载带有 HTML 的外部页面: 你把HTML放在一个隐藏的div中之后就可以在js中使用了:

示例: HTML>

<div id="somediv" style="display: none">

js>

$('#somediv').load('someExternalHTML.html', function() {
    var options = {'title': 'Password Recovery', 'bodyHTML': $('#somediv').html(), 'hideBigCloseButton': true, 'removeOnClose': true};
createMessageBox('password-recovery-box', options, callback);
});

希望这有帮助。

巴勃罗。