在使用新数据的 jQuery POST 请求后重新渲染 EJS 模板答案

【问题标题】：Re-rendering an EJS template after jQuery POST request with new data在使用新数据的 jQuery POST 请求后重新渲染 EJS 模板
【发布时间】：2018-10-01 09:02:20
【问题描述】：

更新由于错误编辑了我的原始代码。

这是我在这里发布的第一个问题，所以请保持温和。 :)

我正在使用带有 Express 和 EJS 表单的 node.js。

我想要实现的是在带有新数据的 jQuery POST 请求之后重新渲染 EJS 模板。这是我正在尝试做的一个简化示例（我的原始代码包含很多大惊小怪、SQL 查询并且没有正确重构）。

我的目标是在按下页面上的按钮时使用不同的数据呈现 same 模板。当前发生的情况是，当我按下按钮时，数据在那里（在控制台中检查），但页面不会再次使用新数据呈现。我完全没有想法，并且已经坚持了将近一天。

我知道我可以做类似的事情

res.send(JSON.stringify(myData));

并使用 JS 脚本构建 HTML，但如果能够使用 EJS 以获得更好的可读性，那就太好了 - 我的原始代码包含很多 HTML 元素。

真的可行吗？或者这是使用 Express 进行渲染的预期行为？对不起，如果我一无所知，因为我对 Web 开发相当陌生。

无论如何，这是我的代码，非常感谢所有想法。谢谢！

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)
})

【问题讨论】：

问题在于 POST 请求不是 GET 请求，因此您的浏览器不会重新加载页面。工作流程是：1. 发送 POST，2. 响应成功/失败 3. 如果成功，从服务器重定向/重新请求同一页面。
兰迪，感谢您的回复！我该如何回应成功/失败？您可以指出我的任何文档/教程吗？
写得很好的问题。

标签： javascript jquery node.js express ejs

【解决方案1】：

请查看我通过下面的链接提供的示例。上面的 HTML 有很多问题，但我会专注于你的问题。有几种方法可以解决这个问题，所以这是最简单的。

正如我在评论中所说，工作流程是：

发送 POST
以成功/失败响应
如果成功，从服务器重定向/重新请求同一页面。

请注意，我不是在处理 EJS，因为当您从服务器请求页面时，会自然而然地发生如您上面所述的那样。

第 1 步：所以在示例中，index.js 是服务器，我有到两个文件的基本路由，index.html 和 page2.html。我这样做是为了让您可以看到正在发生的变化。接下来，在index.html 文件中，我有一个通过jQuery 生成POST 请求的按钮。这会处理第 1 步。

第 2 步：index.js 接受对/test 的发布请求，并以简单的字符串“成功”作为响应（您可以响应任何内容）

Step3：在index.html 中，$.post() 处理程序测试字符串“success”并重定向到page2.html。在您的场景中，这将重定向回同一页面。我做了不同的事情，这样你就可以很容易地意识到变化。

解决方案

https://repl.it/@randycasburn/SimplePostResponseRedirect

【讨论】：

好的，兰迪，感谢您的详尽解释。会调查并回复您 - 如果这解决了问题，我会将您的建议标记为解决方案。
您好兰迪，感谢您花时间解释。不幸的是，这并没有解决问题，因为我的目标是使用不同的数据重新渲染模板，而不是简单地重新加载相同的页面。

【解决方案2】：

这是我的解决方案，部分基于 Randy 的回答。

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)
})

【讨论】：