无法从ejs提取数据到控制器和客户端JS

Question

I am a newbie in node and express. I am working on an app that has a login module. I am able to register a user but am facing some issues while trying to log in a user.

Please find my code below and suggest:

Logincontroller.js

app.post('/testAction',urlencodedParser,function(req,res){

    var usrnm = req.body.username;
    console.log(" usrnm ::: " + usrnm);
    var passwd = req.body.password;
    console.log(" passwd ::: " + passwd);
    Users.findOne({username:"tstusr1"},function(err,data){ // Users is my schema name
        if(err) throw err;
        console.log(" back from ajax with data in login controller :::; " + data);
        res.json(data);
    });
    console.log("inside index2 post");
});

my Login-user.js is

$(document).ready(function(){

      var items = $('form');
      var user ={username: $('[name=username]', items).val()};     
      console.log('user  ' + JSON.stringify(user));

  $('form').on('submit', function(){
      console.log("inside submit login");
      $.ajax({
          type: 'POST',
          url: '/testAction',
          data: user,
          success: function(data, textStatus, jqXHR){
            var resp = JSON.parse(JSON.stringify(jqXHR));
            if(resp["status"]==200){
                console.log("status == 200");
                window.location.href = '/';
            }  
              return data;
          },
          error:function (jqXHR, textStatus, errorThrown) {

              console.log('error  ' + JSON.stringify(user));
              console.log("resp1 :::::: " + JSON.stringify(jqXHR));
              var resp = JSON.parse(JSON.stringify(jqXHR));
              console.log("resp :::::: " + resp);
          }
        });
         return false;
  });  
});

And my ejs file is

<form action="/testAction">
    <label for="username"> Username </label>
    <input type="text" for="username" name="username" />
    <label for="password"> Password </label>
    <input type="password" for="password" name="password" />
    <button type="submit">Log In</button> 
</form>

My issue is I am not able to fetch the values of username and password to the client side js as well as backend server side js.

Please assist

Answer 1

From the code posted, you don't seem to be updating user at all. Neither are you actually including the password in the request's data parameter.

$('form').on('submit', function(e) {
  e.preventDefault();
  $.post('/testAction', {
    username: $('[name=username]', $(this)).val(),
    password: ...
  });
});

If you want a simpler way to pass all the fields from your form:

$('form').on('submit', function(e) {
  e.preventDefault();
  $.post('/testAction', (
    $(this).serializeArray().reduce((o, i) => {
      o[i.name] = i.value;
      return o;
    }, {})
  ));
});

See How can I get form data with JavaScript/jQuery?

Answer 2

Found the solution:

Logincontroller.js

app.post('/testAction',urlencodedParser,function(req,res){

    var reqData = JSON.parse(JSON.stringify(req.body));
    console.log(" reqData username :::::::: " + reqData['username']);

    console.log(" reqData password :::::::: " + reqData['password']);

    Users.findOne({username:reqData['username']},function(err,data){
        if(err) throw err;
        console.log(" back from ajax with data in login controller :::; " + data);
        res.json(data);     
});

Login-user.js

$(document).ready(function(){   

  $('form').on('submit', function(){
      console.log("inside submit login");

      var items = $('form');
      var user ={
              username: $('[name=username]', items).val(),
              password: $('[name=password]', items).val()
           }; 

      $.ajax({
          type: 'POST',
          url: '/testAction',
          data: user,
          success: function(data, textStatus, jqXHR){
            var resp = JSON.parse(JSON.stringify(jqXHR));
            console.log(" resp :::::: " + resp);
            if(resp["status"]==200){
                console.log("status == 200");
                var respData =JSON.parse(JSON.stringify(data));
                var enteredPassword = JSON.parse(JSON.stringify(user));
                console.log(" respData password :::::: " + respData.password);
                console.log(" enteredPassword password :::::: " + enteredPassword.password);

                if(enteredPassword.password==respData.password){
                    console.log("success Matched");
                }else {
                    console.log("unsuccessful not-Matched");
                }

            }  
              return data;
          },
          error:function (jqXHR, textStatus, errorThrown) {

              console.log('error  ' + JSON.stringify(user));
              console.log("resp1 :::::: " + JSON.stringify(jqXHR));
              var resp = JSON.parse(JSON.stringify(jqXHR));
              console.log("resp :::::: " + resp);
          }
        });
         return false;
  });  
});

ejs File :

<form action="/testAction">
    <label for="username"> Username </label>
    <input type="text" for="username" name="username"/>
    <label for="password"> Password </label>
    <input type="password" for="password" name="password" />

    <button type="submit">Log In</button> 
</form>