2017-06-11 19 views
0
<form class="ui form" action"/submit" method="post"> 
     <div class="field"> 
      <label>Time you gave to your Studies:</label> 
      <input type="number" name="study" placeholder="Total time given:"> 
     </div> 
     <div class="field"> 
      <label>Time you gave to your <%= prof %> :</label> 
      <input type="number" name="profession" placeholder="total time given for profession"> 
     </div> 
     <div class="field"> 
      <label>Time you gave for Sleeping :</label> 
      <input type="number" name="sleeping" placeholder="total time spent on Sleeping"> 
     </div> 
     <div class="field"> 
      <label>Time you gave to your games :</label> 
      <input type="number" name="games" placeholder="total time given for games"> 
     </div> 
     <button class="ui button" type="submit">Submit</button> 
</form> 

これは私のフォームであり、私はExpressを使用しています。 、私はそれが404エラーを示して送信ボタンをクリックしたときに、私は、フォームデータをポストすることはできませんよノードjsでポストリクエストを使用できません

router.post('/submit', function(req, res, next) { 
var item = { 
    study: req.body.study, 
    profession: req.body.profession, 
    sleeping: req.body.sleeping, 
    games: req.body.games 
}; 
console.log(item); 
res.render('/index');}); 

何が間違っ:app.jsはメインファイルとindex.jsが、私はいくつかのルートを持っているルートが含まれています私がやっている?どのようにポストリクエストを作成し、フォーラムのデータを取得するのですか?あなたが持っているもの

+0

アクションのフォームタグにエラーがあります。 'action = "submit"に更新してください。 –

答えて

2

また
action="/submit" 
+0

ありがとうございます。私はaction = "/ submit" –

0

、あなたは、あなたが送信されたデータをレンダリングするテンプレートエンジンを使用する必要がありますres.renderを使用している場合:あなたが持っている必要がありますどのような

action"/submit" 

。この場合、ちょうどres.sendFileを使用することができると思われます。詳細情報here

2

投稿したコードから、EJSテンプレートエンジンを使用しているようです。ここではEJS、または実際には任意のテンプレートエンジンファイルをレンダリングする必要があります方法は次のとおりです。

res.render('index'); 

これは、HTMLとしてindex.ejsという名前のファイルをレンダリングします。あなたがPugのような別のテンプレートエンジンを使っているなら、index.pugという名前のファイルをレンダリングします。今後の参考のために


、ここにあなたがExpressで応答として送信できるものがあります:

  • テンプレートファイルのレンダリング:たとえば、res.sendFile('index.html');またはres.sendFile('item.pdf');
  • res.render('index');
  • をファイルの送信いくつかのJSONデータを送信してください:res.json(myJsonObject);
  • プレーンテキスト:res.send('Hello World!');

official Express docsは、Expressの詳細を知る上で優れたリソースです。

関連する問題