从角度到节点的POST数据不起作用

时间:2016-02-09 14:41:31

标签: javascript angularjs node.js forms

我正在使用angular将数据发送到节点服务器,但它无法正常工作。我无法在我的node post方法中看到我的帖子数据(表单中的输入值)。我需要将数据保存在mongoDb中,但我不知道为什么我看不到前端发送的POST值。

我无法通过console.log()在节点中看到我的表单数据。有时它返回{},当我使用

时,有时POST被'morgan'调试器识别为OPTIONS req
console.log(req.body.fname);

我的Html:

    <body ng-app="app" ng-controller="MyController">
    <div id="login-page" class="row">
        <div class="col s12 z-depth-6 card-panel">
            <form ng-submit="postData();">
                <div class="row" style="height: 90px;background-color:#00BFA5;margin: -12px -12px 15px -12px">
                    <h3 class="center-align">Register</h3>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-social-person prefix"></i>
                        <input id="fname" name="fname" ng-model="formData.fname" type="text" class="validate">
                        <label for="fname" class="center-align">First Name</label>
                    </div>
                </div>

                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-social-person-outline prefix"></i>
                        <input id="lname" name="lname" ng-model="formData.lname" type="text" class="validate">
                        <label for="lname" class="center-align">Last Name</label>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-action-account-circle prefix"></i>
                        <input id="username" type="text" name="formData.username" ng-model="username" class="validate">
                        <label for="username" class="center-align">Username</label>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-communication-email prefix"></i>
                        <input id="email" type="email" class="validate" name="email" ng-model="formData.email">
                        <label for="email" class="center-align">Email</label>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-action-lock prefix"></i>
                        <input id="password" type="password" class="validate" name="password" ng-model="formData.password">
                        <label for="password">Password</label>
                    </div>
                </div>
                <div class="row margin">
                    <div class="input-field col s12">
                        <i class="mdi-action-lock-outline prefix"></i>
                        <input id="password-again" type="password" name="pass_again">
                        <label for="password-again">Re-type password</label>
                    </div>
                </div>

                <div class="row">
                    <button class="btn waves-effect waves-light validate col s6 push-s3"
                            style="margin-top: 15px;"
                            type="submit">Submit
                        <i class="material-icons right">send</i>
                    </button>
                    <div class="input-field col s12">
                        <p class="margin center medium-small sign-up">Already have an account? <a
                                href="login.html">Login</a></p>
                    </div>
                </div>
            </form>
            {{ServerResponse}}
        </div>
    </div>
    <script type="text/javascript" src="js/angular_min.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
    <script src="js/materialize.min.js"></script>
    <script>
        angular.module('app', []).controller('MyController', function ($scope, $http) {
            $scope.postData = function () {
                $http.post('http://localhost:3000/api/post', $scope.formData)
                        .success(function (data) {
                            $scope.ServerResponse = data;
                        }).error(function (data) {
                    $scope.ServerResponse = data;
                })
            }
        })
    </script>
    </body>

我的节点代码:

    require('rootpath')();
    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var morgan = require('morgan');
    var mongoose = require('mongoose');

    var jwt = require('jsonwebtoken');
    var config = require('config.json');
    app.set('view engine', 'ejs');
    app.set('views', __dirname + '/views');

    var port = process.env.PORT || 3000;
    mongoose.connect(config.connectionString);
    app.set('superSecret', config.secret);
    app.use(bodyParser.urlencoded({extended: true}));
    app.use(bodyParser.json());
    app.use(morgan('dev'));
    app.post('/api/post', function (req, res) {
        console.log(req.body.fname);
    });
    app.listen(port);
    console.log('Magic happens at http://localhost:' + port);

感谢。

1 个答案:

答案 0 :(得分:1)

请添加您的模块

$httpProvider.defaults.headers.post['Content-Type'] = 
'application/x-www-form-urlencoded;charset=utf-8';