Create a nodejs server easily (10): Handling POST requests_node.js

So far, the server we have built has no practical use. Next, we will start to implement some actually useful functions.

What we want to do is: the user selects a file, uploads the file, and then sees the uploaded file in the browser.

First we need a text area for users to input content, and then submit it to the server through a POST request.

We add code in the start event handler and modify requestHandlers.js as follows:

Copy code The code is as follows:

function start(response) {
console.log("Request handler 'start' was called.");
var body = '' ''
''
''
''
'

'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("Hello Upload");
response.end();
}
exports.start = start;
exports.upload = upload;

You can see the effect by visiting http://localhost:8888/start in your browser.

Next we need to implement the /upload request handler to trigger the POST request when the user submits the form.

In order to make the entire process non-blocking, Node.js will split the POST data into many small data chunks, and then pass these small data chunks to the callback function by triggering specific events. The specific events here include the data event (indicating that a new small data block has arrived) and the end event (indicating that all data has been received).

We do this by registering a listener on the request object. The request object here is passed to the onRequest callback function every time an HTTP request is received.

We put the code in the server, and modify server.js as follows:

Copy code The code is as follows:

var http = require("http");
var url = require("url");
function start(route, handle) {
function onRequest(request, response) {
var postData = "";
var pathname = url.parse(request.url).pathname;
console.log("Request for " pathname " received.");
request.setEncoding("utf8");
request.addListener("data", function(postDataChunk) {
PostData = postDataChunk;
console.log("Received POST data chunk '" postDataChunk "'.");
});
request.addListener("end", function() {
route(handle, pathname, response, postData);
});
}
http.createServer(onRequest).listen(8888);
console.log("Server has started.");
}
exports.start = start;

The above code does three things: First, we set the encoding format of the received data to UTF-8, and then register a listener for the "data" event to collect each new data block received, and Assign it to the postData variable. Finally, we move the request routing call into the end event handler to ensure that it only fires when all data has been received, and only once. We also pass the POST data to the request router, because this data will be used by the request handler.

Next, on the /upload page, the content entered by the user is displayed

Let’s change router.js:

Copy code The code is as follows:

function route(handle, pathname, response, postData) {
console.log("About to route a request for " pathname);
if (typeof handle[pathname] === 'function') {
handle[pathname](response, postData);
} else {
console.log("No request handler found for " pathname);
response.writeHead(404, {"Content-Type": "text/plain"});
response.write("404 Not found");
response.end();
}
}
exports.route = route;

Then, in requestHandlers.js, we include the data in the response to the upload request:

Copy code The code is as follows:

function start(response, postData) {
console.log("Request handler 'start' was called.");
var body = ''
''
''
''
''
'

'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent: " postData);
response.end();
}
exports.start = start;
exports.upload = upload;

The last thing we have to do is: Currently we pass the entire message body of the request to the request route and request handler. We should only pass the parts of the POST data that interest us to the request route and request handler. In our example, we are actually only interested in the text field.

We can use the querystring module introduced before:

Copy code The code is as follows:

var querystring = require("querystring");
function start(response, postData) {
console.log("Request handler 'start' was called.");
var body = ''
''
''
''
''
'

'
''
''
'

'
''
'';
response.writeHead(200, {"Content-Type": "text/html"});
response.write(body);
response.end();
}
function upload(response, postData) {
console.log("Request handler 'upload' was called.");
response.writeHead(200, {"Content-Type": "text/plain"});
response.write("You've sent the text: " querystring.parse(postData).text);
response.end();
}
exports.start = start;
exports.upload = upload;

Okay, that’s all about processing POST data.

In the next section, we will implement the image upload function.