Web-1/AJAX/AJAX-test-flow

Uit Inf2019
< Web-1‎ | AJAX
Naar navigatie springen Naar zoeken springen
De printervriendelijke versie wordt niet langer ondersteund en kan weergavefouten bevatten. Werk uw browserbladwijzers bij en gebruik de gewone afdrukfunctie van de browser.

NodeRed flow (voor Copy/Paste naar NodeRed)

[{"id":"47e5be7f.18a1d","type":"tab","label":"AJAX test","disabled":false,"info":""},{"id":"da0fa061.0b171","type":"http in","z":"47e5be7f.18a1d","name":"","url":"/login","method":"get","upload":false,"swaggerDoc":"","x":100,"y":120,"wires":[["efc6ad9.58dc95"]]},{"id":"af36e55.cd69818","type":"http response","z":"47e5be7f.18a1d","name":"","statusCode":"","headers":{},"x":750,"y":120,"wires":[]},{"id":"9f8caab3.3b2688","type":"http response","z":"47e5be7f.18a1d","name":"JSON","statusCode":"","headers":{"content-type":"application/json"},"x":750,"y":200,"wires":[]},{"id":"905bd1f9.6ae94","type":"template","z":"47e5be7f.18a1d","name":"Page-template","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!doctype html>\n<html>\n  <head>\n      <title>Login</title>\n      <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js\"></script> \n  </head>\n  <body>\n    <h3>Login</h3>\n    <form id=\"loginform\">\n      Your name:\n      <input type=\"text\" name=\"username\">\n      <button type=\"submit\">Submit</button>\n    </form>\n    <div>\n        active users:\n        <div id=\"users\">{{users}}</div>\n    </div>\n    <script>\n        {{{clientscript}}}\n    </script>\n  </body>\n</html>","output":"str","x":600,"y":120,"wires":[["af36e55.cd69818"]]},{"id":"f5d631aa.af394","type":"template","z":"47e5be7f.18a1d","name":"clientscript","field":"clientscript","fieldType":"msg","format":"javascript","syntax":"mustache","template":"var users = document.getElementById(\"users\");\nvar login = document.getElementById(\"loginform\");\n\nlogin.onsubmit= function (event) {\n    event.preventDefault();\n    $.post(\"/login-form\", $(\"#loginform\").serialize(), function (data) {\n        users.innerHTML = JSON.stringify(data);\n        console.log(data);\n        login.username.value = \"\";\n    });\n};\n","output":"str","x":430,"y":120,"wires":[["905bd1f9.6ae94"]]},{"id":"efc6ad9.58dc95","type":"function","z":"47e5be7f.18a1d","name":"process-login","func":"msg.users = JSON.stringify(flow.get(\"users\") || []);\nreturn msg;","outputs":1,"noerr":0,"x":260,"y":120,"wires":[["f5d631aa.af394"]]},{"id":"e54d77a6.3ad178","type":"http in","z":"47e5be7f.18a1d","name":"","url":"/login-form","method":"post","upload":false,"swaggerDoc":"","x":120,"y":200,"wires":[["f952fb41.15df38"]]},{"id":"f952fb41.15df38","type":"function","z":"47e5be7f.18a1d","name":"process-login-form","func":"var username = msg.payload.username || \"\";\nvar users = flow.get(\"users\") || [];\nif (!users.includes(username) && (username !== \"\")) {\n    users.push(username);\n}\nflow.set(\"users\", users);\nmsg.user = username;\nmsg.cookies = {user: username};\nreturn msg;","outputs":1,"noerr":0,"x":310,"y":200,"wires":[["48b51d6b.c1abd4"]]},{"id":"48b51d6b.c1abd4","type":"function","z":"47e5be7f.18a1d","name":"get users","func":"msg.payload = flow.get(\"users\") || [];\nreturn msg;","outputs":1,"noerr":0,"x":480,"y":200,"wires":[["46b170ca.2436b"]]},{"id":"f4eab73.2f41948","type":"inject","z":"47e5be7f.18a1d","name":"reset-users","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"x":122.5,"y":272,"wires":[["bf4c29c8.bb7428"]]},{"id":"bf4c29c8.bb7428","type":"function","z":"47e5be7f.18a1d","name":"no-users","func":"flow.set(\"users\", []);\nreturn msg;","outputs":1,"noerr":0,"x":270.5,"y":272,"wires":[[]]},{"id":"46b170ca.2436b","type":"json","z":"47e5be7f.18a1d","name":"","pretty":false,"x":610,"y":200,"wires":[["9f8caab3.3b2688"]]}]