3

I try to send back to the chrome browser 200 OK response, and the browser doesn't react as I expected, he clean the screen instead change the specific 'div', this is my code:

My Server: (node.js):

    function postHandler(request, response) {
    request.on('data', function(data) {
        body += data;
        var parseBody = queryString.parse(body);
        
        response.writeHead(200, {"Content-Type": "text/plain"});
                response.end("<div>divi</div>");
    });
    response.on('end', function() {
        console.log("End_Body: " + body);
    });
}

and my JavaScript browser ajax call looks like:

$(document).ready(function() {
$("#register_form").ketchup();

var request;
$("#submit_btn")
    .on('click',function() {

        var username = $('#reg_username').val();
        var password = $('#reg_password').val();
        var firstname = $('#firstname').val();
        var lastname = $('#lastname').val();
        var age = $('#age').val();

        request = $.ajax({ url: "/welcome.html",
            type: "POST",
            
            data: {
                'username': username,
                'password': password,
                'firstname': firstname,
                'lastname': lastname,
                'age': age
            }});

        request.done(function (response, textStatus, jqXHR){
            $("#server_answer").text("success");
        });
        request.fail(function (jqXHR, textStatus, errorThrown){
            $("#server_answer").text("fail");


           });

        });
});

What am I doing wrong?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
gran33
  • 12,421
  • 9
  • 48
  • 76
  • You sure that the server executes as well? Try to put some logs inside request.on('data', function(data) { , I didn't execute the code here because i haven't configured the environment, but try to debug to see where it pass. – thiago.lenz Jul 25 '13 at 17:37
  • did you start the server and on what port? do you have apache serving the orginal page? – VeXii Jul 25 '13 at 17:43
  • localhost:8080, no apache – gran33 Jul 25 '13 at 17:45

4 Answers4

1

Try not to send the response from the on 'data', but from the on 'end'... in the client, try to use the success method instead.

Try the following... In server:

function postHandler(request, response) {
var body = '';
//when the request comes with some body
request.on('data', function (data) {
        body += data;
        // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB 
        if (body.length > 1e6) { 
            // FLOOD ATTACK OR FAULTY CLIENT, NUKE REQUEST
            request.connection.destroy();
        }
    });

//when the request is finished. (maybe it's data is long and its takes time)
request.on('end', function () {
      console.log("End_Body: " + body);
      response.writeHead(200, { 'Content-Type': 'text/plain'});
      response.write('<div>divi</div>'); 
      response.end();
    });//end of 'end' event
}

Notice that here you are actuly ignoring the body (i tried to stay as close to your code as i could)...

In Client:

$(document).ready(function() {
    $("#register_form").ketchup();

    $("#submit_btn").on('click',function() {
        var username = $('#reg_username').val();
        var password = $('#reg_password').val();
        var firstname = $('#firstname').val();
        var lastname = $('#lastname').val();
        var age = $('#age').val();

        $.ajax({ url: "",
                 type: "POST",
                 data: {'username': username,
                        'password': password,
                        'firstname': firstname,
                        'lastname': lastname,
                        'age': age},
                 success: function(data) {//on success
                      $("#server_answer").text("success");
                 },
                 fail: function (jqXHR,textStatus,errorThrown){ // when the ajax call fails
                      $("#server_answer").text("fail");

                 }
        }); //of ajax
    });//of on 'click'
});

Notice that i deleted the url ( put '' instead) so its default is to the localhost... the way you did it you actully sent the post request to '/welcome.html' but that isnt where you deal with these requests (probably on server.js or something - which is your localhost)

i used some of this

Community
  • 1
  • 1
goldengil
  • 1,007
  • 9
  • 25
1

I didn't execute your code, but my guess will be that your page refreshes when your click handler ends.

Try adding return false; at the end of your click handler.

Dagan Sandler
  • 475
  • 1
  • 5
  • 16
1

As Zohar Yahav mentioned, try the following:

statusCode: {
200: function() {
alert('whatever');
}},

and don't forget..

return false
Ohad Zadok
  • 3,452
  • 1
  • 22
  • 26
0

Can you test with following changes. In server :

function postHandler(request, response) {
    request.on('data', function(data) {
        body += data;
    });
    request.on('end', function() {
        var parseBody = queryString.parse(body);

        response.writeHead(200, {"Content-Type": "text/plain"});
                response.end("<div>div</div>");
        console.log("End_Body: " + body);
    });
}

on browser

request.done(function(msg) {
    $("#server_answer").text("success");
});

request.fail(function(jqXHR, textStatus) {
    $("#server_answer").text("fail");
});

The arguments you give for done and fail are for the success and error handlers given in the ajax call.

user568109
  • 47,225
  • 17
  • 99
  • 123
  • took from here: http://stackoverflow.com/questions/5004233/jquery-ajax-post-example – gran33 Jul 25 '13 at 17:51
  • Yes they are correct, can you check if the response is reaching the browser or not. To find if the problem is on node or browser. – user568109 Jul 25 '13 at 18:17