Экспресс POST - Возвращенный JSON обрабатывается JQuery

Question

Я пытаюсь написать небольшую службу проверки подлинности с помощью Express и Node.

Я сделал поиск по SO и, похоже, не нашел свой ответ , хотя есть много подобных вопросов, но нет окончательный ответ на самом деле.

Я пробовал много вариантов кода на стороне сервера, но кажется, что я все еще что-то не хватает.

POST-вызов выполнен с HTML-страницы с некоторым кодом JQuery (ajax-вызов).

Я ввожу метод post() в Express, но когда возвращает ответ на 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 call.

<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

Как 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> 

Answer 2

Это делает то, что вы ищете: https://github.com/braitsch/node-login

Я рекомендовал бы схватить что от мерзавца и смотреть через него. Вы даже можете использовать его в качестве шаблона. Довольно хороший материал, и когда вы хотите увидеть клиентскую сторону вещей, вы можете просто посмотреть на сценарии, связанные с страницей login.

пример здесь: http://node-login.braitsch.io/