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

Posted 2023-03-08

【中文标题】Express POST - 返回的 JSON 被 JQuery 视为无效

【英文标题】：Express POST - Returned JSON is treated as invalid by JQuery

【发布时间】：2013-12-20 07:16:52

【问题描述】：

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

我在 SO 上进行了搜索，但似乎没有找到我的答案 即使有很多类似的问题，但没有 确实是确定的答案。

我尝试了我的服务器端代码的许多变体，但是 看来我还是错过了什么。

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

我在 Express 中输入了 post() 方法，但是当 它返回对 HTML 页面的响应，总是 ajax 错误处理程序被执行，而不是成功处理程序。

我返回的 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>

【问题讨论】：

用response.send(JSON.stringify(res));替换response.json(res);，你就是金子

不走运。仍然在浏览器中调用错误处理程序（我正在使用 FF 进行测试）。我想我已经尝试过了（如上所述尝试了 4-5 种不同的变体）。

错误说明了什么

你能粘贴你的 jquery 调用吗？

console.log 错误函数的参数并告诉我们错误是什么。无效的 JSON 通常是解析错误

【参考方案1】：

正如 adeneo 指出的那样，关键是通过 提供 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>

【参考方案2】：

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

我建议从 git 中获取并查看它。您甚至可以将其用作模板。相当不错的东西，当您想查看客户端的内容时，只需查看与 login 页面关联的脚本即可。

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

【讨论】：

我不想要现有的解决方案。我刚开始使用 Node.js 并尝试自己编写一些代码。我能够在 adeneo 的帮助下解决我的问题（发布此问题后 3-4 小时）。无论如何感谢您的帮助。

没问题，有时我会查看现有解决方案的代码并重写我自己的版本。我实际上是通过我发布的示例做到这一点的。所以这对我来说是一个很好的指南。很高兴你解决了！