我想实施以下项目。该页面有一个导航栏，其中包含多个项目。无需重新加载页面即可显示每个选项卡的内容。我将 Nodejs 与 ejs 模板引擎一起使用。我做了很多研究，但我找不到解决方案。我认为您必须向服务器发送一个 Ajax 请求，然后它会发回所需的 html 部分。谁能帮我举个例子？我从逻辑上理解它，但我还不能直接实现它。如果您需要任何进一步的信息来帮助我，请随时给我写信。
问候。
【问题讨论】：
标签： javascript jquery node.js ajax express
例如，NodeJS 服务器应用程序应该只向您发送 JSON 数据。您需要的所有 HTML 元素都可以使用 JavaScript 动态创建，您只需将最近创建的数据插入到您的 HTML 元素中。
这只是一个简单的例子：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
【讨论】：
app.get('/navitem', function (req, res) { //compute data here res.render('navitem', {layout: false, data: data}); });
为了获得有效的解决方案，您可以首先使用两个 npm 模块来帮助您发送正确的数据。
假设您想发送一些动态数据的 html 格式，您希望使用 html/pug/ejs/handlebars 发送数据，因为如果您的路由器需要处理，您也可以在那里发送数据。
您可以使用node-email-templates 将其他平台的html 转换为内联css 到css 文件中的html。请参阅链接以了解更多信息。
虽然您没有发送电子邮件，但您可以使用它。
现在，您想从您的路线发送此信息，以下是示例：https://github.com/niftylettuce/node-email-templates/tree/master/examples
现在，您已经生成了带有 css inline 的 html 格式，您需要将生成的 HTML result.html 作为响应发送，但是您需要知道根据请求要呈现哪些数据，所以您可能需要设置多条路线，或者您可以使用params 或query 进行一条：
我主要使用它来将 css 内联嵌入到 html，但您可以简单地执行 res.send() 并在您的主 html 中使用 css（您接收它的地方）。
var EmailTemplate = require('email-templates').EmailTemplate;
var path = require('path');
router.get('/api/:page', function(req, res){
if (req.params.page == 'home')
{
//set the directory to your html here : /views/home contains html.pug
// and style.css
var templateDir = path.join(__dirname, '..', 'views', 'home');
var page = new EmailTemplate(templateDir);
}
var user = {name: 'Joe', pasta: 'spaghetti'}
page.render(user, function (err, result) {
// NOTE: I am passing user object which you can use to render data same as res.render('', user: user).
// so in your template user.name will be rendered as Joe and user.pasta will be rendered as spaghetti
// result.html
res.status(200).send(result.html);
});
});
现在您可以使用 jquery AJAX 或 axios 来接收和应用您喜欢的任何一个。
您可以将data-page 附加到您的链接（或您希望用户单击的任何内容）并将其设置为适当的值。
...
<li class="nav-links"><a href="#" data-page="home">Home</a></li>
<li class="nav-links"><a href="#" data-page="about">About</a></li>
...
<div class="main-content">
<!-- content to be added here -->
</div>
...
我正在使用 jQuery。
$('.nav-links a').click(function(e){
var page = $(this).attr('data-page');
$.ajax({
method: "get",
url: "/api/"+page,
success: function(response){
$('.main-content').empty().append(response);
}
});
});
希望对您有所帮助。 :)
【讨论】：