POST请求未将数据返回Express即返回到服务器

时间:2019-05-17 03:26:49

标签: node.js forms express post xmlhttprequest

我有一个电子邮件和密码的表单验证,如果匹配,它将被其他代码替换并在serverconsole中显示电子邮件和密码。程序的流程是onclick()提交,它进入 main.js 并执行 newFunction(),它将 POST 数据返回到服务器,即< strong> Server.js 并替换html内容。但在我的情况下,处理了 / Login 网址,但在 Server中,电子邮件和密码没有输入到if条件。 js *
        if( emailid == 'abc@g.com' && password == '123' ) { console.log('Success'+emailid+password); }

我已经尝试了所有POST请求处理程序,但无法正常工作。

Home.html

     `<!--Login LogOut-->
    <div class="container" id ="Loginchange">
        <div class="row">
            <div class="col"  style="padding-center:20px; border-right: 3px solid #84b1aa;"><!--For middle line-->
                <!--Existing user-->
                <button class="btn btn-primary btn-lg btn-block active" type="button" data-toggle="collapse" data-target="#existingUser" aria-expanded="false" aria-controls="existingUser">
                    Existing User

                </button>
                <div class="collapse" id="existingUser">
                    <div class="card card-body"><!--Start of existing in button-->
                        <!--Alert with X-->
                        <div class="alert alert-warning alert-dismissible fade show" role="alert">
                            <strong>Hello Arkodian</strong> Please Log in.
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <!--Existing Form-->
                        <form>
                            <div class="form-group">
                                <label for="LoginEmail">Email address</label>
                                <input  type="email" class="form-control" id="LoginEmail" aria-describedby="emailHelp" placeholder="Enter email" data-toggle="tooltip" data-placement="top" title="Email Id" required>
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <div class="form-group">
                                <label for="LoginPassword">Password</label>
                                <input  type="password" class="form-control" id="LoginPassword" placeholder="Password" required>
                            </div>
                          <!--  <div class="form-group form-check">
                                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                <label class="form-check-label" for="exampleCheck1">Check me out</label>
                            </div> -->
                            <button onclick="newsFunction()" id="Login" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>`

main.js

  function newsFunction() {
     var Request = new XMLHttpRequest();
     Request.onreadystatechange = function(){
      if (Request.readyState == XMLHttpRequest.DONE){
        if (Request.status == 200){
             let  loginHtml = Request.responseText;
             let  ul = document.getElementById('Loginchange');
             ul.innerHTML =loginHtml ;
             console.log(loginHtml);
           }
       }
     };

     Request.open('POST', '/Login', false);
     Request.send({
        extid: document.getElementById('LoginEmail'),
        extpsd:document.getElementById('LoginPassword')
       });
    }

Server.js

 var express = require('express');
 var bodyParser = require('body-parser');
 var app = express();
 app.use(bodyParser.urlencoded({extended :false}));
 app.use(bodyParser.json());

 app.post('/Login',function(req,res){
   var emailid = req.body.extid;
   var password = req.body.extpsd;
    if( emailid == 'abc@g.com' && password == '123' ){
        console.log('Success'+emailid+password);
      }
    else {
       console.log('user not found');
      }
    var loginHtml = `<p>Hello World</p>`
    res.status(200).send(loginHtml);
 });

2 个答案:

答案 0 :(得分:0)

尝试类似这样的操作将数据对象字符串化,并添加标题"Content-Type": "application/json

function newsFunction() {
     var Request = new XMLHttpRequest();
     Request.onreadystatechange = function(){
      if (Request.readyState == XMLHttpRequest.DONE){
        if (Request.status == 200){
             let  loginHtml = Request.responseText;
             let  ul = document.getElementById('Loginchange');
             ul.innerHTML =loginHtml ;
             console.log(loginHtml);
           }
       }
     };

     Request.open('POST', '/Login', false);
     Request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
     Request.send(JSON.stringify({
        extid: document.getElementById('LoginEmail').value,
        extpsd:document.getElementById('LoginPassword').value;
       }));
    }

答案 1 :(得分:0)

It got worked when I added 。值 to the JSON object.