Question

我正在学习节点。我被困在可以从get方法渲染视图而不能从post渲染视图的地方。

app.js

var express = require("express");
var path = require("path");
var favicon = require("serve-favicon");
var logger = require("morgan");
var cookieParser = require("cookie-parser");
var bodyParser = require("body-parser");
var test = require("./routes/test");

app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(test);

test.js

var express = require("express");
var router = express.Router();
router.get("/test", function(req, res, next) {

  res.render("testView1");  //working OK

});

router.post("/test", function(req, res, next) {
  console.log("Its a test") // Working OK
  res.render("testView2",{

      // some data to be posted

  }); // not redirecting to testView2
});

module.exports = router;

在按钮单击事件中将调用

post / test。它应该呈现testView2页面，其中我必须显示一些数据。我对这种渲染感到困惑……请帮助我学习。

谢谢

Sunil

到目前为止，

testView2.ejs只是一个简单的纯html模板 testView2.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
  </head>

  <body>
    <h1>testview 2</h1>
  </body>
</html>

testView1.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <% include ./scriptLinks/headerLinks.ejs %>
  </head>

  <body>
    <h1>TestView 1</h1>
    <button id="btn-test">Test</button>
    <script>
      $("#btn-test").on("click", function(e) {
        e.preventDefault();
        $.post("/test", { name: " some data" });
      });
    </script>
  </body>
</html>

是，所有ejs文件都位于view文件夹中。谢谢。

Answer 1

当然不会起作用。 $.post是ajax请求，并且是异步的，因此它不会使浏览器使用标头中的/test方法导航到post路由。

让testView1.ejs具有以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <% include ./scriptLinks/headerLinks.ejs %>
  </head>
  <body>
    <h1>TestView 1</h1>
    <form method="post" action="/test">
      <button id="btn-test">Test</button>
    </form>
  </body>
</html>

但是如果您坚持要进行ajax调用，请这样做：

1）testView2.ejs必须仅包含以下内容（无标题，正文，无html标记）：

<h1>testview 2</h1>

2）testView1.ejs：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <% include ./scriptLinks/headerLinks.ejs %>
  </head>
  <body>
    <h1>TestView 1</h1>
    <form method="post" action="/test">
      <button id="btn-test">Test</button>
    </form>

    <script>
      $(function() {

        $("from").on('submit', function(e) {
          e.preventDefault();

          var method = $[$(this).attr('method').toLowerCase()];
          if (!method) method = 'get';

          method(
            $(this).attr('action'), 
            { name: " some data" }, 
            function(response) {
              $('body').html(response);
            });
        });
      });
    </script>
  </body>
</html>

警告：：我不建议将html响应注入到正文中-可能会导致意外行为，因为您似乎没有足够的前端体验

router.post没有呈现页面

1 个答案: