Question

更新由于错误而修改了原始代码。

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

我正在使用带有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)
})

Answer 1

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

如我的评论中所述，工作流程为：

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

注意我没有解决EJS问题，因为当您从服务器请求页面时，会自然地按照您的说明进行操作。

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

第2步：index.js接受/test的发布请求，并使用简单的字符串＆＃34;成功＆＃34; （你可以回答任何事情）

第3步：在index.html $.post()处理程序中测试字符串＆＃39;成功＆＃39;并重定向到page2.html。在您的方案中，这将重定向回同一页面。我做了不同的事情，所以你可以很容易地意识到这种变化。

<强> 解决方案

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

Answer 2

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

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

使用新数据在jQuery POST请求之后重新呈现EJS模板

2 个答案: