Q&A
多くの方は NodeJS をサーバー側JavaScriptと認識しています（DOMの無い実行環境のため、ブラウザ側JavaScriptとは別物扱いします）。ブラウザ側の質問を含めるときは利用するフレームワーク名とテンプレートエンジン名も併記し、タグがあれば含めてください。
フォームから検索し、検索結果を表示するようにしています。
そこで、ページを更新、切り替えることなく検索結果を表示したいのですが、上手くいきません。
何か方法があればご教授頂きたいです。
よろしくおねがいします。
Node.js + Express + EJS + MySQLです。
<body> <div role="main"> <form method="post" action="/hello/add" name="test"> <div> <input type="text" name="name" value="<%= form.name %>"> </div> <div> </td><input type="submit" value="検索"> </div> </form> </div> <div> <% if (mydata != null){ %> <p><ul> <li><%- mydata.id %></li> <li><%- mydata.attributes.name %></li> <li><%- mydata.attributes.comment %></li> </ul></p> <% } %> </div> </body>
var express = require('express'); var router = express.Router(); var mysql = require("mysql"); var knex = require("knex")({ dialect: "mysql", connection: { host : "localhost", user : "root", password : "", database : "db", charset : "utf8" } }); var Bookshelf = require("bookshelf")(knex); var MyData = Bookshelf.Model.extend({ tableName: "mydata" }); var mysql_setting = { host : "localhost", user : "root", password : "", database : "db" }; router.get("/add", (req, res, next) => { var data = { form: {name:""}, mydata: null, } res.render("hello/add", data); }); router.post('/add', (req, res, next) => { new MyData().where("name", "=", req.body.name).fetch().then((collection) => { var data = { form: req.body, mydata: collection, }; res.render("hello/add", data); }) }); module.exports = router;
回答1件
0
ベストアンサー
何か方法があれば
Ajaxを使う案はどうでしょうか。
現状は次のようになっていて、必ずページ遷移が発生していると思います。
- ブラウザからURLのリクエストを受け付けたサーバー側JavaScript（NodeJS実装）はDBを検索。
- DB検索の結果に応じ、テンプレートエンジンで生成したHTML を応答（ブラウザが表示）
（検索結果を表示するときも同様のはずです）
Ajaxを用い、結果に応じてブラウザ側で動的にHTMLを書き換える方法になります。
- ブラウザ側が Ajaxでフォーム内容をサーバーにPOST要求。
- サーバー側は ブラウザからのPOST要求に応じ、DB検索した結果をJSONで応答する。
- 1.で Ajax実装が 2. の応答（JSON）に基づきDOM操作して書き換える。
この方法を取る案になります。
JavaScriptをサーバー側/ブラウザ側で分けて考える必要があります
ejs テンプレート内の
<%〜%>がサーバー側javascript.- script要素を記述すると（src属性で別ファイルを読ませてもいい）ブラウザ側javascript.
となるはずです。
ブラウザ側での Ajax や DOM操作による動的なHTMLの書き換えについては、
質問から外れますので、手順概要だけの回答とさせていただきます。
投稿2019/12/07 04:13
総合スコア5432
回答ありがとうございます。
まだ私には難しそうですが、まずは１つずつ挑戦していきます。
その過程でまたご助言を頂けると幸いです。
ありがとうございました。
あなたの回答
tips
プレビュー
