更新由于错误而编辑了我的原始代码。
这是我在这里发布的第一个问题所以请保持温和。 :)
我正在使用带有Express和EJS表单的node.js。
我想要实现的是在使用新数据的jQuery POST请求之后重新呈现EJS模板。这是我想要做的简化示例（我的原始代码包含很多大惊小怪的SQL查询并且未经过适当的重构）。
我的目标是在按下页面上的按钮时使用不同的数据呈现相同的模板。当前发生的事情是当我按下按钮时，数据在那里（在控制台中检查），但页面不会再次使用新数据渲染。我完全没有想法，现在已经坚持了近一天。
我知道我可以做点什么
res.send(JSON.stringify(myData));
并使用JS脚本构建HTML，但能够使用EJS以获得更好的可读性会很好 - 我的原始代码包含许多HTML元素。
它可行吗？或者这是使用Express渲染的预期行为？对不起，如果我一无所知，因为我对网络开发还不熟悉。
无论如何，这是我的代码，所有的想法都非常感激。谢谢！
test_dynamic.ejs：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" action="/test">
<wrapper>
<h1>
<button id="toggleButton" onclick="toggle()" type="button">Toggle</button>
</h1>
<div>
<% console.log('Should show ' + name + ' with id: ' + id) %>
<li><%=name %></li>
<li><%=id %></li>
</div>
</wrapper>
</form>
</html>
<script>
var shouldShowJohn = false;
function toggle () {
var postData = {};
shouldShowJohn = !shouldShowJohn;
if (shouldShowJohn)
postData.mode = 1;
else
postData.mode = 2;
$.post('http://localhost:3000/test', postData, function (data) {
$('#toggleButton').html('').append('Showing ' + postData.mode);
});
}
</script>
routes.js：
router.get('/test', (req, res) =>{
var obj = {
name: 'DefaultName',
id: 1
}
res.render('test_dynamic', obj);
})
router.post('/test', (req, res) => {
var obj = {};
console.log('req.body.mode: ' + req.body.mode);
if (req.body.mode == 1)
obj = {
name: 'John',
id: 2
}
else
obj = {
name: 'Karl',
id: 3
}
res.render('test_dynamic', obj)
})
请通过以下链接查看我已包含的示例。上面的HTML有很多问题，但我会关注你的问题。有几种方法可以解决这个问题所以这是最简单的方法。
正如我的评论中所述，工作流程是：
注意我没有解决EJS问题，因为当您从服务器请求页面时，如上所述，该页面将自然发生。
第1步：所以在示例中，index.js是服务器，我有两个文件的基本路由，index.html和page2.html。我做到了这一点，你可以看到发生的变化。接下来，在index.html文件中，我有一个按钮，通过jQuery生成POST请求。这将照顾第1步。
第2步：index.js接受对/test的发布请求，并以简单的字符串“成功”响应（您可以回复任何内容）
Step3：在index.html中，$.post()处理程序测试字符串'success'和重定向到page2.html。在您的方案中，这将重定向回同一页面。我做了不同的事情，所以你很容易意识到变化。
解
这是我的解决方案，部分基于兰迪的答案。
test_dynamic.ejs：
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="myBody">
<form method="post" action="/test">
<wrapper>
<h1>
<button id="toggleButton" onclick="toggle()" type="button">Toggle</button>
</h1>
<div>
<% console.log('Should show ' + name + ' with id: ' + id) %>
<li><%=name %></li>
<li><%=id %></li>
</div>
</wrapper>
</form>
</body>
</html>
<script>
var shouldShowJohn = false;
var postData = {};
postData.mode = 'toggle';
function toggle () {
$.post('http://localhost:3000/test', postData, function (data) {
$('#toggleButton').html('').append('Showing ' + postData.mode);
$('#myBody').html(data);
});
}
</script>
routes.js：
router.get('/test', (req, res) =>{
var obj = {
name: 'DefaultName',
id: 1
}
res.render('test_dynamic', obj);
})
var currentMode = 1;
router.post('/test', (req, res) => {
var obj = {};
console.log('req.body.mode: ' + req.body.mode);
if (req.body.mode == 'toggle')
if (currentMode < 3)
currentMode++;
else
currentMode = 1;
if (req.body.mode == 1)
obj = {
name: 'John',
id: 2
}
else
obj = {
name: 'Karl',
id: 3
}
res.render('test_dyanmic', obj)
})