Javascript 如何从服务器返回html模式目标视图？

我想在网站上有一个按钮，打开一个模式视图使用引导。像这样：

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

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

如果有人能帮我一些伪代码，那将是非常有帮助的

更新

我使用bootstrap remote选项（参见下面的答案）实现了该功能，下面是我如何调用该模式的：

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

---

由于您似乎在使用引导，它实际上内置了这个功能，因此您不必自己进行ajax调用。查看的

远程

选项

您返回的内容只需要是您希望包含在模态内容中的HTML片段

如果使用express，您将如何返回模态的html示例如下（使用jade作为模板引擎，但它可以是您喜欢的任何内容）：

在本例中，模板

modalFeedback.jade

中只包含html，不管怎样，它是html的jade版本，这就是您希望在模式中显示的html。您甚至可以先检查用户是否是管理员或其他人，而不是简单地呈现模板。根据检查，您可以选择要渲染的模板。键为

res.render

转到并获取文件，该文件将传递您提供的数据，并将其从模式返回到浏览器调用

---

更新：

远程

从v3.3.0开始，并在v4中删除。（这更适合作为注释，但可能会被忽略，因此将其放在此处是为了保护人们以后管理向后兼容性问题的时间）

我建议将html中的modal div保留为空

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

---

谢谢，我将研究远程选项，并用我的结果更新问题。返回的html片段是否只是一个javascript字符串？一根很长的绳子？从javascript函数返回html片段的最佳方法是什么？我已经用一个示例更新了答案，说明了如何将一个字符串（一个非常长的字符串）返回到模式以供显示。谢谢。很清楚，很有道理。对于bootstrap remote选项，我是否将/modalFeedback路由放在按钮的href标记中？喜欢这样：是的，就是这样。谢谢，我明天会试试，然后把你的答案标记为正确。谢谢，非常清楚的答案，我会测试这个vs引导远程选项。但这种方法肯定会奏效。

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

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

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

$('#modalButton').click() -> 
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","/modalFeedback",true);
xmlhttp.onreadystatechange=function()
{
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
  document.getElementById("modalbox").innerHTML=xmlhttp.responseText;
 }
}    
xmlhttp.send();
$("#modalbox").show();