Brontekst bekijken van Web-1/AJAX/AJAX-test-flow


NodeRed flow (voor Copy/Paste naar NodeRed)
<syntaxhighlight lang=json>
[{"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"]]}]
</syntaxhighlight>

[[Categorie:Web1]]