I then create a POST fetch request specifying that the data is application/json and the JSON data as body. We then create the JSON string response using JSON.stringify(). To make it simple, I have created the onFormSubmit(form) method in the same HTML site as follows: įirst we read the values from username and password by using the given ids in the form. In the above HTML form, we're using action to tell the form that it will be triggering a javascript method instead of the default behavior, and we're using onsubmit to specify which JavaScript method to call when the user presses the submit button, we're sending this as parameter to the function so that we're able to read the information from the form. Parsing JSON POST requests is also a one liner, the tedious part comes from the HTML point of view, because we have to hack the form to prevent it's default behavior and manually read data from the form, manually create the JSON and create the request. I use the end event to parse the complete captured data and to send the response to the server. Let parsedData = code(rawData)īefore registering the callbacks I declare and initialize a string named rawData to append all the incoming data in order, the data event will be called every time data is available for the server to read, the end event will be called when there is no more incoming data. To read the data I added callbacks to the data and end emit events as follows: const querystring = require('querystring') Now how do we read and parse this kind of data from Node.js? The name is really important, if you don't include the name, it won't send the data to the server, the name is used to identity the incoming data from the server side.īecause this form doesn't include the action parameter in the first tag, it sends the request to the same URL loaded in the browser. The id in the inputs are useful for styling with CSS or to find the fields easily when accessing them through JavaScript. Submit: creates the button to trigger the post request. Password: same as text but visibly hides the text and puts Within the form tags there are 3 different input types, text, password and submit. The form above sends data using the POST method, you can also send this kind of data as GET request, but I rather parse data in the body of the request than the URL. The below HTML snippet creates a form that encodes requests as application/x-www-form-urlencoded, The default enctyp of html forms is application/x-www-form-urlencoded, it sends data formatted in the same way you sometimes see on URLs when visiting websites, example: name1=value2&name2-value2, the encoding type changes to multipart/form-data when posting files, we will show how to parse these kinds of requests later in the story. How to encode Node.js response from scratch This project takes advantage of the learnings I shared in my previous posts, so I won't be covering those topics here: The full source code is available at the end of this post, so if you know what you're doing you can dive straight to it, if you're also learning enjoy the read. LinkedIn logo for sharing a link Twitter logo for sharing a link Reddit logo for sharing a linkĪlright, for this one I'll be honest, it was not easy, because everywhere I looked there were solutions with third-party libraries or just partial theory information, and as you might already know, I'm learning Node.js and web technologies from scratch to know what's going on under the hood.
0 Comments
Leave a Reply. |