Блог

У меня есть форма и базовый маршрут, который отправляет данные в базу данных после нажатия кнопки «Отправить». Вот код формы, с которой я работаю:

 lt;form action="/posts" method="POST"gt;  lt;labelgt;  lt;pgt;Enter your post title: lt;/pgt;  lt;input type = "text" id= 'title' name='title' value='enter name here'gt;   lt;pgt;Enter your post description:lt;/pgt;  lt;input type = 'text' id = 'description' name ='description' value = 'your description here'gt;   lt;input type="submit" value = 'OK'gt;   lt;/labelgt;  lt;/formgt; 

А затем вот код, который получает данные и отправляет их:

 router.post('/', (req, res) =gt; {   const post = new Post({  title: req.body.title,  description: req.body.description  });   post.save().then(data=gt; {  res.json(data);  })  .catch(err =gt; {  res.json({message: err });  });   res.render('submission_complete.ejs');   }); 

Проведя некоторое исследование, я узнал, что res.json() завершает ответ, как и res.render(). Проблема в том, что я хочу отправить данные, а затем отобразить новую страницу, которая сообщит пользователю, что данные были успешно отрисованы. Как мне добиться этого? Код работает, но выдает ошибку «Необработанное предупреждение об ошибке: Ошибка [ERR_HTTP_HEADERS_SENT]: Не удается установить заголовки после их отправки клиенту».

Итак, если вы хотите отобразить шаблон ejs, а также отправить данные клиенту(с помощью этого шаблона), express позволяет нам сделать это, просто вызвав метод ответа render и передав ему не только имя шаблона, но и некоторые данные во втором аргументе. В вашем случае это было бы:

 router.post('/', (req, res) =gt; {  const post = new Post({  title: req.body.title,  description: req.body.description  });   post.save().then(data=gt; {  // Now i'm calling the render method and passing to it:  // - the name of the template i want to render(without extension if you called the app.set('view engine', 'ejs'))  // - an object containing the data property which is the response you get after the post has been saved  res.render('submission_complete', { data /* you can also write it as { post: data } */ });  })  .catch(err =gt; {  res.json({message: err });  });  });  

Как только вы сделаете это в своем шаблоне, вы сможете просто получить доступ к этим переменным, так что это будет(я думаю, что вы хотите сделать):

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;titlegt;Documentlt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;h1gt;POST SAVED SUCCESFULLYlt;/h1gt; lt;!-- or whatever --gt;  lt;divgt;  lt;!-- it would be data.title if you passed '{ data }' as the second argument --gt;  lt;%= post.title %gt;  lt;brgt;  lt;!-- same as above, (data or post).description depending on what you passed as the second argument --gt;  lt;%= post.description %gt;  lt;/divgt;  lt;/bodygt; lt;/htmlgt;  

Вы также можете просто позвонить

 res.render('submission_complete', data);  

И получить доступ к его свойствам по отдельности

 lt;divgt;  lt;%= title %gt;  lt;brgt;  lt;%= description %gt; lt;/divgt;  

Сказав это, я добавлю ваш код с некоторыми улучшениями, просто чтобы сделать его чище

 // DISCLAIMER // I'm calling the render method and not passing the file extension because // i'm assuming you called 'app.set('view engine', 'ejs');' in the file where you // declare the app variable router.post('/', async (req, res) =gt; {  // if you don't want to check the body of your request because you know you can receive only the right properties you can do all this stuff in just few lines  try {  const post = await new Post(req.body).save();  res.render('submission_complete', post);  } catch (e) { res.json({ message: err.message }); } });