Question

我正在尝试使用Express和Node编写一个小型身份验证服务。

我在SO上搜索过，似乎没有找到答案即使有很多相似的问题，但没有确切的答案真的。

我尝试了很多服务器端代码，但是好像我还在遗漏一些东西。

POST调用是从HTML页面进行的使用一些JQuery代码（ajax调用）。

我在Express中输入post（）方法但是什么时候它返回对HTML页面的响应，始终是ajax 执行错误处理程序，从不执行成功处理程序。

我回来的我的JSON对我来说似乎有效。我试着在上面调用send和json 响应对象，但没有任何作用。

我错过了什么？

非常感谢任何帮助。提前谢谢。

var mod = require('express');

var auth = require('./login_module.js'); // my module

var express = require('express');
var app = express();

app.use(express.bodyParser());

app.post('/login', function(request, response) {

   console.log("post method called");

   var credentials = request.body;
   console.log("credentials = " + credentials);
   console.log(credentials);

   auth.authenticate(credentials.username, credentials.password, function(result){
        console.log("Authentication Result: " + result);
        var code = result === 1 ? 200 : 401;
        console.log("Response Code: " + code);
        var res = {
            data : "Response Code: " + code
        };
        console.log(JSON.stringify(res));

        // So far I am good!

        response.statusCode = code;
        response.json(res);

        // Response is now sent
        // but not recognized as 
        // valid JSON in the client.
        console.log("response sent");
   });

});

app.listen(10101);

JQuery调用。

  <script type="text/javascript">
        $(document).ready(function(){
            $( "#btn" ).click(function(){
                  alert('calling now!');
                  var obj = {
                    username: $('#usrn').val(),
                    password: $('#pwd').val()
                  };
                $.ajax({
                    type: "POST",
                    url: 'http://localhost:10101/login',
                    data: obj,
                    success: function (data, textStatus, jqXHR){
                        alert('got response back!');
                        if ("200" === textStatus){
                            $('#status').text('Login succeeded!');
                        }else if ("401" === textStatus){
                            $('#status').text('Login failed!');
                        }else{
                            $('#status').text('Invalid status received: ' + textStatus);
                        }
                    },
                    error : function(jqXHR, textStatus, errorThrown){
                        alert("Error when getting response.");
                    },

                    dataType: 'json'
                });
            })
        });
    </script>

Answer 1

正如阿德内诺所指出的那样，关键是要在html页面上提供服务 http而不是文件协议。其余的只是一些调整关于Ajax jQuery调用的各种细节。

服务器端代码：

var mod = require('express');

var auth = require('./acct_module.js');
var fs = require('fs');

var express = require('express');
var app = express();

app.use(express.bodyParser());

app.post('/login', function(request, response) {

   console.log("POST called - try to login against the MongoDB.");

   var credentials = request.body;
   console.log("credentials = " + credentials);
   console.log(credentials.username);
   console.log(credentials.password);

   auth.authenticate(credentials.username, credentials.password, function(result){
        console.log("Authentication Result: " + result);
        var code = result === 1 ? 200 : 401;
        var message = result === 1 ? "Login succeeded!" : "Login failed!";
        console.log("Response Code: " + code);
        var res = {
            message: message,
            code : code
        };

        console.log(JSON.stringify(res));

        response.statusCode = code;

        response.json(res);

        console.log("POST response sent.");
   });

});

app.get('/login', function(request, response){
    console.log("GET called - send back the HTML file.");
    fs.readFile('login.html', function (err, data) {
        if (err) {
            response.writeHead(500, {'Content-Type': 'text/html'});
            response.write("Request failed.");
            response.end();
            return;
        }
        response.writeHead(200, {'Content-Type': 'text/html'});
        response.write(data);
        response.end();

        console.log("GET response sent.");
    });
});

app.listen(10101);

登录页面login.html：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $( "#btn" ).click(function(){
                  // alert('Now calling the auth manager!');
                  var obj = {
                    username: $('#usrn').val(),
                    password: $('#pwd').val()
                  };
                $.ajax({
                    type: "POST",
                    url: 'http://localhost:10101/login',
                    data: obj,
                    success: function (data, textStatus, jqXHR){
                        // alert('success called!');
                        var res = JSON.parse(jqXHR.responseText);
                        $('#status_message').html(res.message);
                        $('#status_code').html(res.code);
                    },
                    error : function(jqXHR, textStatus, errorThrown){
                        // alert('error called!');
                        var res = JSON.parse(jqXHR.responseText);
                        $('#status_message').html(res.message);
                        $('#status_code').html(res.code);
                    },
                    dataType: 'json'
                });
            })
        });
    </script>

</head>
<body>
    <input type="text" id="usrn" name="usrn"/><br>
    <input type="password" id="pwd" name="pwd"/><br>
    <input type="button" id="btn" name="btn" value="LOGIN!"/><br><br>
    <div id="status_message" name="status_message"></div><br>
    <div id="status_code" name="status_code"></div><br>
</body>
</html>

Answer 2

这可以满足您的需求：https://github.com/braitsch/node-login

我建议从git中抓取它并查看它。你甚至可以将它用作模板。非常好的东西，当你想看到客户端的东西时，你可以看看与login页面相关的脚本。

这里的例子： http://node-login.braitsch.io/

Express POST - 返回的JSON被JQuery视为无效

2 个答案: