Node、Express、Ajax 和 Jade 示例

Posted 2023-03-07

【中文标题】Node、Express、Ajax 和 Jade 示例

【英文标题】：Node, Express, Ajax, and Jade Example

【发布时间】：2012-07-27 15:42:48

【问题描述】：

我正在寻找一个使用 Ajax 调用更新 Node/Express/Jade 页面的简单示例，其中包含客户端和服务器端代码。

我很难把所有这些都放在我的脑海里。

【参考方案1】：

有很多方法可以做到这一点，你想采用哪种方法并不是很明显。

我想最简单的方案是添加一些客户端逻辑以从服务器获取 html 片段并更新客户端。这可以使用 jQuery 轻松实现（将其放在文档就绪块中以连接事件）：

$('#button').click(function() 
     $.get('/some/url', foo: 42, function(result) 
         $('#target').html(result);
     

这样，您的所有 html 都在服务器上生成，您只需根据需要获取并插入到页面中。

您还可以从服务器获取 json 并在客户端呈现 html，但这是替代方法之一。我强烈建议给 TodoMVC 看看 - 它是一个具有许多不同实现（每个都使用不同的框架）的待办事项列表应用程序，因此是各种方法和帮助程序库的绝佳学习资源。

我还推荐Hands-on Node.js 这本书。它将帮助您了解路由以及如何开始使用 Node。

【讨论】：

谢谢莫腾。我理解节点中的路由很好。我很欣赏你上面给出的例子，但是服务器端呢？我是否将玉模板传递给 ajax 请求？部分呢？

您对所有服务器端请求执行相同的操作，除了一些 url 将映射到呈现部分视图的处理程序。这可能只是一个普通的 Jade 模板，除了它只会包含您想要呈现的标记（而不是整页 html）。

@MortenMertner 要呈现该部分视图，或调用执行此操作的服务器端函数，来自客户端的示例 AJAX 路由是什么？

@AndrewPeacock 我想这取决于您，因为这取决于您在服务器上拥有哪些路由。例如，您可以将服务器路由映射到 url /products/details，它为 get 请求呈现完整页面，为 post 请求呈现部分视图。在客户端上，您将使用 $.post('/products/details', id:42, function(result) ...); 执行 ajax/post 请求（使用 jQuery），然后从服务器返回部分视图。如果您愿意，也可以为部分视图使用单独的 url。

@AndrewPeacock 我认为它只是点击了。我现在感觉有点傻。节点服务器响应的是预渲染的部分视图，而不是带有文档类型、标题、标题等的整个页面？这似乎更安全。与其取回客户端 javascript 必须呈现的对象，不如服务器端翡翠为您完成并返回准备就绪的 html？这一切都正确吗？