wrong ajax response on nodejs

Question

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?

score 0 · Answer 1 · edited May 23 '17 at 12:06

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");
            }
        })
}

wrong ajax response on nodejs

1 Answers1