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?

3
  • 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. Jul 25, 2013 at 17:37
  • did you start the server and on what port? do you have apache serving the orginal page?
    – VeXii
    Jul 25, 2013 at 17:43
  • localhost:8080, no apache
    – gran33
    Jul 25, 2013 at 17:45

4 Answers 4

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.

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

0
1

As Zohar Yahav mentioned, try the following:

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

and don't forget..

return false
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.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.