Top image

Perl Monk

主にPerlとRaspberryPiの個人的技術研鑽

[Node-RED]フォームを作り、Postで送信し受け取って表示させる

2020/04/02 20:00
category:サーバ全般

HTML編

Postで送信されたデータは、

msg.payload.【postデータの名前】

で簡単に受け取れます。

まずはシンプルなところから。

フォームを作り、Postで送信し受け取って表示させる

以下フロー

[{"id":"3414666d.4e9eca","type":"comment","z":"6977c003.1a2e","name":"Webフォームを表示、Postデータを受け取る","info":"http://192.168.33.22:1880/html-post","x":230,"y":280,"wires":[]},{"id":"5c8335fe.3d9514","type":"http response","z":"6977c003.1a2e","name":"","statusCode":"","headers":{},"x":490,"y":340,"wires":[]},{"id":"e16bc711.159bd","type":"http in","z":"6977c003.1a2e","name":"","url":"/html-post","method":"get","upload":false,"swaggerDoc":"","x":140,"y":340,"wires":[["dbbf51d8.6c704"]]},{"id":"867edb22.627508","type":"http in","z":"6977c003.1a2e","name":"","url":"/html-result","method":"post","upload":false,"swaggerDoc":"","x":140,"y":400,"wires":[["35799eb7.359472"]]},{"id":"35799eb7.359472","type":"template","z":"6977c003.1a2e","name":"HTML生成","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<b>Formの入力データ</b><br>\n{{payload.form_data}}<br><br>","x":330,"y":400,"wires":[["b6c3207c.ca631"]]},{"id":"b6c3207c.ca631","type":"http response","z":"6977c003.1a2e","name":"","x":490,"y":400,"wires":[]},{"id":"dbbf51d8.6c704","type":"template","z":"6977c003.1a2e","name":"HTML生成","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<b>post data</b><br>\n<form action=\"/html-result\" method=\"post\">\n<input type=\"text\" name=\"form_data\"  size=\"10\" value=\"\">\n<button type=\"submit\">送信</button>\n</form>","x":330,"y":340,"wires":[["5c8335fe.3d9514"]]}]