javascript - 如何从服务器返回 html 模态目标 View ？

Question

我想在网站上有一个使用 Bootstrap 打开模态视图的按钮。像这样:

<button class="btn btn-primary btn-lg" id="modalButton" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

所以这个按钮针对的是一个名为#myModal 的 View 。不是从客户端 html 加载#myModal View ，我想向服务器发出 AJAX 请求以获取#myModal View ，因为 View 会根据用户是否为管理员而有所不同，并且该变量驻留在服务器上。

所以请求会是这样的:

$('#modalButton').click() -> 
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET","/modalFeedback",true);
  xmlhttp.send();

然后/modalFeedback 路由应该检查用户是否是管理员，并发回相应的#myModal View 。我对如何准确地实现这一点感到困惑，更具体地说，如何从服务器返回 #myModal View 以便它正常打开。

如果有人可以帮助我提供一些伪代码，那将非常有帮助!

更新

我使用 Bootstrap 远程选项(请参阅下面的答案)让它工作，这是我调用模态的方式:

a#uservoice_tab(data-toggle="modal", href="/modalFeedback.html", data-target="#myModal")
  img(src='/img/icon-idea.png')
// You need to have #myModal element in the same place you have the button. Bootstrap injects the body into this element remotely
#myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')

这里是jade中的modalFeedback.html源码

.modal-dialog
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
        h4#myModalLabel.modal-title Modal title
      .modal-body
      .modal-footer
        button.btn.btn-default(type='button', data-dismiss='modal') Close
        button.btn.btn-primary(type='button') Save changes

Answer 1

因为您似乎在使用 Bootstrap ，所以它实际上内置了此功能，因此您不必自己执行 ajax 调用。查看 modals 的 remote 选项.

您返回的内容只需是您希望出现在模态内容中的 HTML 片段即可。

如果您使用 express，您将如何返回模态的 html 的示例如下(使用 jade 作为您的模板引擎，但它可以是您喜欢的任何东西):

app.set('view engine', 'jade');

app.get(
    '/modalFeedback'
    ,function(req, res, next){
        res.render('/modalFeedback.jade', { user: req.user });
    }
);

模板，在本例中 modalFeedback.jade 中只有 html，无论如何都是 html 的 jade 版本，这是您希望在模态中显示的 html。您甚至可以首先检查用户是否是管理员或其他人，而不是简单地呈现模板。根据支票，您可以选择要呈现的模板。关键是 res.render 获取文件并将您提供的数据传递给它，并将其返回给浏览器从模态调用。

更新:remote 是deprecated从 v3.3.0 开始并在 v4 中删除。 (这本来更适合作为评论，但很可能会被遗漏，因此将其放在这里是为了保护人们以后管理向后兼容性问题的时间)