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

Posted 2023-03-08

【中文标题】无法从 ejs 获取数据到控制器和客户端 JS

【英文标题】：unable to fetch data from ejs to controller and client side JS

【发布时间】：2017-11-06 15:16:31

【问题描述】：

我是 node 和 express 的新手。我正在开发一个具有登录模块的应用程序。我可以注册用户，但在尝试登录用户时遇到了一些问题。

请在下面找到我的代码并提出建议：

登录控制器.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");
);

我的 Login-user.js 是

$(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;
  );  
);

我的 ejs 文件是

<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>

我的问题是我无法将用户名和密码的值获取到客户端 js 以及后端服务器端 js。

请帮忙

【问题讨论】：

您是否在任何时候遇到错误？您可能还希望在表单处理程序中使用event.preventDefault()。你还在更新user吗？

目前还没有这样的要求，不过谢谢建议，会继续关注的

您的问题不够清楚。您收到错误消息吗？你是什​​么意思“无法获取值......客户端......以及......服务器”？这些值已经在客户端上。您是否更正了我在下面的答案中发布的问题？你甚至没有发送最新的用户名，页面加载时只有空值。

【参考方案1】：

从发布的代码来看，您似乎根本没有更新用户。您实际上也没有在请求的数据参数中包含密码。

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

如果您想要一种更简单的方式来传递表单中的所有字段：

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

见How can I get form data with javascript/jQuery?

【讨论】：

很抱歉，但没有帮助

@SaurabhJhunjhunwala 什么没有帮助？你还没有说你得到了什么错误。我发布的是针对您的代码存在的两个关键问题的解决方案。

我仍然没有得到价值

【参考方案2】：

找到解决方案：

登录控制器.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);     
);

登录用户.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 文件：

<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>