router.post не отображает страницу - PullRequest
Новая
       6

router.post не отображает страницу

0 голосов
/ 10 ноября 2018

Я изучаю узел. Я застрял, где я могу сделать представление из метода get, но не из поста.

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, где я должен отобразить некоторые данные. Я застрял с этим видом рендеринга ...... Пожалуйста, помогите мне узнать это.

Спасибо

Сунил

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>

и yes Все файлы ejs находятся в папке просмотра. Спасибо.

1 Ответ

0 голосов
/ 10 ноября 2018

Конечно, это не будет работать. $.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-ответ в тело - это может привести к неожиданному поведению, поскольку у вас недостаточно опыта работы с веб-интерфейсом

...