【问题标题】:Posting form data from AngularJs frontend to NodeJS RESTful API using restangular使用restangular将表单数据从AngularJs前端发布到NodeJS RESTful API
【发布时间】:2016-11-16 14:34:45
【问题描述】:

我正在处理一个项目,并且在使用 restangular 将表单数据从我的 angularJS 前端发布到我的后端 RESTful API 时遇到了麻烦。每次我尝试都会收到错误代码 400(错误请求)。下面是我的代码

app.js

'use strict';

angular
    .module('clientApp', ['ngRoute', 'restangular'])
    .config(function ($routeProvider, RestangularProvider) {

    RestangularProvider.setBaseUrl('http://127.0.0.1:3000');

    $routeProvider
      .when('/', {
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl',
      controllerAs: 'login'
    })

      .when('/create/user', {
      templateUrl: 'views/user-add.html',
      controller: 'UserAddCtrl',
      controllerAs: 'userAdd'
    })
     .otherwise({
      redirectTo: '/'
    });
    });

查看/user.html

<div ng-controller="UserAddCtrl">

    <form class="form-horizontal" name="regForm" ng-submit="saveUser()">  
        <fieldset>

            <div class="form-group">
                  <label class="col-md-4 control-label" for="textinput">First Name</label>  
                  <div class="col-md-4">
                  <input id="Fname" name="Fname" type="text" ng-model="newUser.FnameValue" placeholder="Enter First Name" class="form-control input-md" required>

                  </div>
            </div>


            <div class="form-group">
                  <label class="col-md-4 control-label" for="Last Name">Last Name</label>  
                  <div class="col-md-4">
                  <input id="Lname" name="Lname" ng-model="newUser.LnameValue" type="text" placeholder="Enter Last Name" class="form-control input-md">

                  </div>
            </div>


            <div class="form-group">
                  <label class="col-md-4 control-label" for="Staff ID">Staff ID</label>  
                  <div class="col-md-4">
                  <input id="StaffId" name="StaffId" ng-model="newUser.StaffIdValue" type="text" placeholder="Enter Staff ID" class="form-control input-md" required>                   
                  </div>
            </div>


            <div class="form-group">
                  <label class="col-md-4 control-label" for="Email">Email</label>  
                  <div class="col-md-4">
                  <input id="Email" name="Email" ng-model="newUser.EmailValue" type="text" placeholder="Enter Email" class="form-control input-md" required="">

                  </div>
            </div>


            <div class="form-group">
                  <label class="col-md-4 control-label" for="Password">Password</label>
                  <div class="col-md-4">
                    <input id="Password" name="Password" ng-model="newUser.PasswordValue" type="password" placeholder="Enter Password" class="form-control input-md" required>

                  </div>
            </div>

            <div class="form-group">
                  <label class="col-md-4 control-label" for="Register"></label>
                  <div class="col-md-4">
                    <button id="Register" name="Register" type="submit" class="btn btn-primary">Creat User</button>
                  </div>
            </div>

        </fieldset>
    </form>

</div>

控制器/user.js

'use strict';

angular.module('clientApp')
  .controller('UserAddCtrl', function ($scope, Restangular, $location) {

     $scope.saveUser = function() {
         $scope.newUser = {};

         var restVar = Restangular.all('user');

         restVar.post($scope.newUser).then(function() {
             $location.path('/users');
             console.log('Success');
         }, function(response) {
             console.log('Error with status code', response.status);
         }); 
     };

 });

每次执行 about 代码时,我都会收到 400(错误请求)...我做错了什么?

请注意,我使用的是 mongodb,我的数据库名称是 isdbmeanapp,我的集合名称是用户,因此我的服务器 url 是 http://127.0.0.1:3000/user

【问题讨论】:

    标签: javascript angularjs node.js mongodb restangular


    【解决方案1】:

    在 Restangular 中,帖子应该针对集合而不是元素。

    在你的情况下,POST应该是这样的;

    $scope.newUser = {email :"", password: "", etc: ""};
    

    然后发出类似的POST请求;

    Restangular.all('user').post("users", $scope.newUser);
    

    参考;

    https://github.com/mgonto/restangular#element-methods

    Restangular POST form data in json format in Angular JS

    【讨论】:

    • 当我尝试你的建议时,这就是我得到的...... XMLHttpRequest 无法加载127.0.0.1:3000/…。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,Origin 'localhost:9000' 不允许访问。响应的 HTTP 状态代码为 400。
    • 在这种情况下你应该使用 CORS,更多信息可以在这里找到:html5rocks.com/en/tutorials/cors
    • 在我的服务器端,这是我在 index.js 文件中处理 CORS 的方式 // CORS 支持 app.use(function(req, res, next) { res.header('Access-Control- Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); res.header('Access-Control-Allow-Headers', '内容类型'); next(); });即使这样,我仍然有上述 XMLHttpRequest 错误
    • 你能帮帮我吗
    • 我可以成功地从服务器执行 GET,但我无法向服务器执行 POST
    猜你喜欢
    • 1970-01-01
    • 2018-09-11
    • 1970-01-01
    • 2018-02-09
    • 1970-01-01
    • 2016-12-29
    • 1970-01-01
    • 2016-06-12
    • 2020-06-11
    相关资源
    最近更新 更多