Q&A課題で履修登録システムを作っています。
“履修する”というボタンを押すと生徒番号が取得でき、
サーバー側でその生徒番号をMongoDBに保存したいと考えております。
しかしHandlebarsの<button id="{{studentNumber}}">履修する</button>のidを
どのようにしてサーバー側で取得したらよいかわからず質問させていただきました。
フォルダ内はこのようになっています。
public--
|
--student.js
views--
|
--student.hbs
server.js
もともと、student.hbsから以下のような方法で直接server.jsにidを渡したかったのですが、
<input type="text">以外の方法でstudentNumberの値の渡し方がわからず、student.jsを作成してみました。
‟履修する”ボタンを押すと、student.jsでid studentNumberが受け取れるようにもしてみたのですが
student.jsからserver.jsへidの値をどのように受け渡してよいかわかりません。
///server.js app.get("/student", (req,res)=>{ Students.find() .exec() .then((students)=>{ var data = []; for(const student of students){ data.push({ studentNumber.student.studentNumber }) } res.render("student",{ data, layout: false }) }) }) app.post("/student", (req,res)=>{ console.log(req.body.studentNumber); ///ここでidのstudentNumberを受け取れるようにしたいです })
///student.hbs <head> <script src="/student.js"></script> </head> <body> {{#each data}} <div> <button id"{{studentNumber}}">履修する></button> </div> {{/each}} </body>
///student.js const buttons = document.getElementByTagName("button"); window.onload = ()=>{ for(var i = 0; i < buttons.length; i++){ buttons[i].addEventListener("click", (e) =>{ console.log(`生徒番号${e.target.id}がクリックされました！`)； //例）生徒番号1がクリックされました！ const json = { "studentNumber": e.target.id } console.log(json.studentNumber); //1 ////ここから取得した生徒番号1をどのようにしてserver.jsのapp.post("/student")に渡せばよいかわかりません /////試しにfetchを使用してみましたがserver.jsのapp.post("/student")に渡せませんでした。 fetch("/student", { method: "post", body: JSON.stringify(json) }) .then((response)=>{ if(response.ok){ console.log(response.json); return response.json(); } throw new Error("failed"); }) }) } }
わかりずらい説明で申し訳ありませんが、
student.jsで取得したstudentNumberをserver.jsへ渡すやり方を教えていただけると助かります。
それか、student.jsを介さず、直接student.hbsからserver.jsへ渡すやり方があればそちらも教えていただけると助かります。
ご教示よろしくお願いいたします。
回答1件
0
以下のようにhandlebarsを変更してみたところ、
student.jsを介さずに直接server.jsのapp.post("/student")で
studentNumberを取得することができました。
///student.hbs <form method="post" action="/student"> <input name="studentNum" type="hidden" value="{{studentNumber}}"> <button type="submit">履修する</button> </form>
app.post("/student", (req, res)=>{ console.log(req.body.studentNum); ///1 })
投稿2021/10/29 19:26
総合スコア2
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。