Angular POST请求无效

时间:2016-12-10 09:10:14

标签: javascript angularjs node.js mongodb express

我使用passport.js设置了注册和登录系统。我在前端使用Angular.js。但是当我使用angular时,它不会注册我的用户。没有角度,它运作良好。请参阅以下代码:

没有角色代码(可行):

<form action="/signup" method="post">
    <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="password">
    </div>

    <button type="submit" class="btn btn-warning btn-lg">Signup</button>
</form>

使用Angular Code(不起作用):

<!doctype html>
<html ng-app="login">

<head>
<title>Node Authentication</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- load fontawesome -->
<script src="./javascripts/controllers/signup.js"></script>
<style>
    body {
        padding-top: 80px;
    }
</style>
</head>

<body ng-controller="loginCtrl">
<div class="container">

    <div class="col-sm-6 col-sm-offset-3">

        <h1><span class="fa fa-sign-in"></span> Signup</h1>

        <!-- show any messages that come back with authentication -->
        <% if (message.length> 0) { %>
            <div class="alert alert-danger">
                <%=m essage %>
            </div>
            <% } %>

                <!-- LOGIN FORM -->
                <form>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" class="form-control" ng-model="user.email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" ng-model="user.password">
                    </div>

                    <button ng-click="signup()" class="btn btn-warning btn-lg">Signup</button>
                </form>

                <hr>

                <p>Already have an account? <a href="/login">Login</a>
                </p>
                <p>Or go <a href="/">home</a>.</p>

    </div>

</div>

角度控制器代码:

var login = angular.module('login', [])

login.controller('loginCtrl', function($scope,$http){

$scope.user = {};

$scope.signup = function(){

   return $http.post('/signup',$scope.user)
   .then(function(data) {
   console.log("da" + data);
 });
 };

})

注册路线:

    // process the signup form
app.post('/signup', passport.authenticate('local-signup', {
    successRedirect : '/profile', // redirect to the secure profile section
    failureRedirect : '/signup', // redirect back to the signup page if there is an error
    failureFlash : true // allow flash messages
}));

注意:

在后端,我设置了Node / Express.js API。成功注册后,它使用passport.js将用户添加到MongoDB中,并将用户重定向到个人资料页面。

但是目前数据进入数据库(我可以在数据库中看到新用户)它没有将用户重定向到配置文件页面,也没有显示我发回的任何错误消息(即,如果用户已经存在)

3 个答案:

答案 0 :(得分:0)

AJAX请求不会重定向浏览器。如果要重定向到新页面,则需要告知角度路由器在API成功响应后执行此操作。如果您不使用Angular路由器,只需使用window.location重定向。

return $http.post('/signup',$scope.user)
    .then(function(data) {
        console.log("da" + data);
        window.location.href = '/profile';
    });

您的/signup是基本上是API的端点。调用它将以某种方式重定向,但它只会在响应方面这样做。因此,您的Angular应用程序将从重定向接收响应,但它不会重定向浏览器本身。如果您要从浏览器直接发布到该URL,它将重定向,但通过AJAX调用完成的任何HTTP路由都不会直接影响浏览器。

答案 1 :(得分:0)

使用$routeProvider$stateProvider这是UI-router的一部分。

定义.config。在config内部使用$routeProvider$stateProvider定义路由配置。

以下链接可能有所帮助。

Route configuration using $routeProvider

Route configuration using $stateProvider

答案 2 :(得分:0)

当然,agnularJs应用程序负责重定向,您应该在登录过程后使用eventdata1=eventdata[['competition', 'hometeam', 'awayteam', 'team', 'MatchDateTime', 'EventDateTime', 'PreviousEventDateTime', 'Goal_Flag']] 重定向用户