I am playing with ajax on nodejs, so I can better understand node.
The form (client-side)
<form id="fruitform" method="post" action="/">
<div class="table">
<div class="row">
<div class="cell label">Bananas:</div>
<div class="cell"><input name="bananas" value="2"/></div>
</div>
<div class="row">
<div class="cell label">Apples:</div>
<div class="cell"><input name="apples" value="5"/></div>
</div>
<div class="row">
<div class="cell label">Cherries:</div>
<div class="cell"><input name="cherries" value="20"/></div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
</div>
<button id="submit" type="button">Submit Form</button>
</form>
<div id="results"></div>
<script type="text/javascript">
document.getElementById("submit").onclick = handleButtonPress;
//var httpRequest;
function handleButtonPress(e) {
e.preventDefault();
var formData = "";
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++) {
formData += inputElements[i].name + "=" + inputElements[i].value + "&";
}
formData = formData.slice(0, -1);
var hr = new XMLHttpRequest();
hr.open("POST", "/", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
document.getElementById("results").innerHTML = hr.responseText;
}
}
hr.send("formData="+encodeURIComponent(formData));
}
</script>
Just a form with fields, each field has a number. JS creates a json structure. formData contains bananas=2&apples=5&cherries=20.
Now, this my minimalistic server so far. It works, but how can I access the data came from the form via request?
Also, in the client side, I dont get rrr in the "results" div, I am getting the whole html of the page again , I get the form again. Why is that? I dont get it.
I want to understand node , so please dont suggest me Express, or other modules. I want to know why this simple code wont work
Thanks in advance
Server
//requires
var http = require ('http');
var fs = require ('fs');
var path = require ('path');
var mime = require ('mime');
//set server
var server = http.createServer(function (request, response){
var filePath = false;
if (request.url == '/'){
filePath='public/index.html';//default static file
}
else{
filePath='public'+request.url;//set relative file path
}
var absPath = './'+filePath;
serveStatic(request, response, cache, absPath);
});
server.listen(4000, function(){
console.log("Chatrooms server on port 4000");
}
);
//read the file
function serveStatic(request, response,cache, absPath){
fs.readFile(absPath, function(err, data){
sendFile(request, response, absPath, data);
})
}
//serve the file
function sendFile(request, response, filePath, fileContents){
response.writeHead(
200,{"content-type":mime.lookup(path.basename(filePath))}
);
response.end(fileContents);
formPro(request, response);//now that is done sending, lets check the form
}
function formPro(request, response){
if (request.method=="POST"){
var rrr="rrr";//insted of rrr, i see the form again
response.writeHead(200,{"content-type":"text/plain"});
response.write(rrr);
response.end();
}
}
EDIT I guess response gets overwritten. Code works normally but, response contains rrr, but since the httpserver always responses last, response transmits the page again, at the end. Is there a way to independently listen for form events, without using the httpserver?
I think the following code fixes a lot of problems. Credits and cudos to OrangeDog's answer here, ampersand's answer here and also the book "Node.js in Action" by Mike Cantelon, Marc Harter, T.J. Holowaychuk and Nathan Rajlich, ©2014 by Manning Publications, chapters 4.3 - 4.4
<html>
<head> <title>Chatrooms</title> </head>
<body>
<form id="fruitform" method="post" action="/">
<div class="table">
<div class="row">
<div class="cell label">Bananas:</div>
<div class="cell"><input name="bananas" value="2"/></div>
</div>
<div class="row">
<div class="cell label">Apples:</div>
<div class="cell"><input name="apples" value="5"/></div>
</div>
<div class="row">
<div class="cell label">Cherries:</div>
<div class="cell"><input name="cherries" value="20"/></div>
</div>
<div class="row">
<div class="cell label">Total:</div>
<div id="results" class="cell">0 items</div>
</div>
</div>
<button id="submit" type="button">Submit Form</button>
</form>
<div id="results"></div>
<div id="de"></div>
</body>
</html>
<script type="text/javascript">
document.getElementById("submit").onclick = handleButtonPress;
function handleButtonPress(e) {
e.preventDefault();
var formData = "";
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++) {
formData += inputElements[i].name + "=" + inputElements[i].value + "&";
}
formData = formData.slice(0, -1);
document.getElementById("de").innerHTML = formData;
var hr = new XMLHttpRequest();
hr.open("POST", "/formHandler", true);
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
document.getElementById("results").innerHTML = " ";
document.getElementById("results").innerHTML = hr.responseText;
}
}
hr.send(formData);
}
</script>
Server Side
//dependencies
var http = require ('http');
var fs = require ('fs');
var path = require ('path');
var mime = require ('mime');
var qs = require('querystring');
//this is the http server
var server = http.createServer(function (request, response){
var filePath = false;
if (request.url == '/'){
filePath='public/index.html';//default static file
sendThis(response, filePath);
return;
}
if (request.url == '/formHandler'){
var body='';
if (request.method=="POST"){
request.on('data', function (data) {
body += data;
});
request.on('end', function () {
var aa = qs.parse(body);
var c= aa['apples'];
response.writeHead(200,{ 'Content-Type': 'text/plain' });
response.end(c, "utf-8");
});
}
return;
}
else{
filePath='public'+request.url+'.html';//set relative file path
sendThis(response, filePath);
return;
}
});
server.listen(4000, function(){
console.log("Chatrooms server on port 4000");
}
);
function sendThis(response, filePath){
var stream = fs.createReadStream(filePath);
stream.pipe(response);
stream.on('error', function(err){
if('ENOENT'==err.code){
response.statusCode = 404;
response.end('not found');
}
else{
response.statusCode = 500;
response.end("Internal Server Error");
}
})
}