Question

我刚开始用NodeJs + mySQL学习AngularJS，而且我并不熟悉express如何处理来自Angular控制器的POST请求。

更新我现在可以在我的cmd上获得POST / login 200，但由于某种原因，页面不会重定向到 success.html 。我也得到了成功的行动＆＃34;回调是否成功？

这是我的客户端（Angular）代码， index.html

<!DOCTYPE html>
<html>
<head>

<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>

<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../public/css/style.css">
</head>
<body>
<div ng-app="myApp" ng-controller="loginController">
<div class="container">
<br>
<br>
<br>
<br>
<h1 class="welcome text-center" style="text-align:center;">Welcome</h1>

    <div class="card card-container">
    <!--
    <h2 class='login_title text-center'>Login</h2>
    -->
    <hr>

        <form class="form-signin" ng-submit="sub()">

            <p class="input_title">Username:</p>
            <input type="text" id="inputEmail" class="login_box" ng-model="username" required autofocus>
            <p class="input_title">Password</p>
            <input type="password" id="inputPassword" class="login_box" ng-model="password" required>
         <br>
         <br>
            <button class="btn btn-lg btn-primary" type="submit">Login</button>
        </form><!-- /form -->
    </div><!-- /card-container -->
</div><!-- /container -->

</div>

<script>
var app = angular.module('myApp', []);

app.controller("loginController", function($scope,$http) {

$scope.sub = function() {

    var data = {
        username: $scope.username,
        password: $scope.password,
        body: $scope.body
    };

    $http.post("/login", data).then(function(success){
        console.log('action on success');
    }, function(error) {
        console.log('action on error');
    });


}
}
</script>

</body>
</head>
</html>

我的服务器端代码 server.js

var express = require('express');
var bodyParser = require('body-parser');
var morgan = require('morgan');
var config = require('./config');
var sequelize = require('sequelize');
var passport = require('passport');
var jwt = require('jsonwebtoken');

var app = express();
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(morgan('dev'));
app.use(passport.initialize());

app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-
type, Authorization');
next();
});


app.use(express.static(__dirname + '/app'));

app.get('/',function(req,res){

res.sendFile(__dirname + '/app/views/index.html');


});

app.post('/login', function(req, res, next){
console.log("post here!");
return res.redirect(__dirname +'/app/views/success.html');
});

app.listen(3000,function(err){

if(err){

console.log(err);
}
else{
console.log("Listening on port 3000");
}
});

当用户点击提交时，不应该运行server.js的POST代码并将我重定向到success.html吗？提前谢谢。

Answer 1

你真的不需要在AngularJS appilcations中使用jQuery。

<script>
var app = angular.module('myApp', []);

app.controller("loginController", function($scope,$http) {

    $scope.sub = function() {

        var postObj = {
            username: $scope.username,
            password: $scope.password,
            body: $scope.body
        }

        $http.post("/login", postObj).then(function(success){
            console.log('action on success');
        }, function(error) {
            console.log('action on error');
        });

    }

});

</script>

对于默认请求，将使用Content-Type: application/json标头发送。

AngularJS HTTP POST不起作用

1 个答案: