Express POST – 返回的JSON被JQuery视为无效
我正在尝试使用Express和Node编写一个小型身份validation服务。
我做了一个search，似乎没有find我的答案，即使有很多类似的问题，但没有确切的答案。
我尝试了很多我的服务器端代码的变体，但似乎我仍然失去了一些东西。
POST调用是由HTML页面和一些JQuery代码（ajax调用）构成的。
我在Express中inputpost（）方法，但是当它返回HTML页面的响应时，总是执行ajaxerror handling程序，而不是成功处理程序。
我返回的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>
正如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页面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>
这就是你要找的： https ： //github.com/braitsch/node-login
我build议从git中抓取并查看它。 你甚至可以用它作为模板。 相当不错的东西，当你想看到客户端的东西，你可以看看与login页面相关的脚本。
例如这里： http : //node-login.braitsch.io/