0

Im trying to send data from my server side to my client side with ajax but when i use res.send(data) in node, it show me a empty html with the data and i want to get data from my client side without reloading the page and edit something in my actual html

Here's my server-side code

    app.post('/',(req,res)=>{
    var userName = req.body.username;
    var password = req.body.password;

    connection.query('SELECT * from admin',(err, rows, fields)=> {
      if (!err){
        if((userName == rows[0].usuario) && (password == rows[0].contraseña)){
            res.sendStatus(200);    

        }else{
            res.send('Incorrect username or password')
        }
      }else{
        res.send('Error while performing Query.');
      }

    });

});

Here's my client-side code

$(document).ready(function(){
$('#login-form').submit(function (e) {
        setTimeout(function () {
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '/',
            dataType: 'jsonp',
            data: ({username: $('input[name=username]'),password: $('input[name=password]')}),
            success: function(data,textStatus){
                if(textStatus.statusCode == 200) {
                    $('.error-user').html('Succes');    
                }else{
                    $('.error-user').html('Not Success');
                }


            },
        });
        }, 1000);

});       
});

UPDATE: I removed the setTimeOut() but when I submit the form the page freeze like two seconds and then nothing happen, I get this 'error Maximum call stack size exceeded', dont get me data just stay in the same view if like post method was never called

UPDATE-FINAL: I got values from input outside of the ajax and it works nice,thanks :#

3
  • Add an error handler to the Ajax call. It also looks like you are not sending back jsonp Commented Apr 2, 2017 at 3:28
  • Why are you using the setTimeout()? It is part of the problem. Your form has submitted and the page reloaded from the form submission BEFORE you run your ajax call and before you call e.preventDefauilt() so that is called too late. Remove the setTimeout() or put the e.preventDefault() before the setTimeout(). In either case, the setTimeout() seems like screwy code. If you thought you were fixing something with that, then that's a hack and you should fix whatever it is the proper way and remove the setTimeout(). Commented Apr 2, 2017 at 4:16
  • look update question Commented Apr 2, 2017 at 4:26

4 Answers 4

1

You forgot : .val() to send the value of inputs :

data: ({username: $('input[name=username]').val(), password: $('input[name=password]').val() }),

and NOT :

data: ({username: $('input[name=username]'),password: $('input[name=password]')}),
Sign up to request clarification or add additional context in comments.

Comments

1

Remove the setTimeout which is preventing your preventDefault from running in the actual event handler and causing you to see the response in the browser load rather than ajax handler, and debug from there.

4 Comments

If I do that, the page freeze for a moment and then nothing happen and it give me this error = 'Maximum call stack size exceeded "
Can you add that info to your question, like complete code and exact error message? setTimeout is definitely not right.. so call stack is the error to fix
Show the complete error including stack, it will show the functions that are repeating
getting this error jquery.min.js:4 Uncaught RangeError: Maximum call stack size exceeded at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4) at Ab (jquery.min.js:4)
0

Preventdefault is creating issue. You can remove that to run Ajax call

1 Comment

still take me to another html
0

If I understand you correctly, you may be using the request method.

To retrieve the data from your node server's data you should use the GET method when the page completes loading.

To send a request to node when the form is submitted your often will send a request from the client side js to make a persistent change to a database on the node server. Depending on what you would like to achieve, you should use the POST, PUT, PATCH, DELETE methods.

These methods will typically create, update, update a portion of data set, or remove records or documents from an SQL or NoSQL database available to your node server.

1 Comment

I can't use GET method because the information is username and password from user

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.