AngularJS $ http.post未将数据发送到Django REST后端

时间:2018-06-30 22:40:10

标签: angularjs django-rest-framework

我一直在关注本教程(https://thinkster.io/django-angularjs-tutorial#registering-new-users),并且正在尝试将信息发布到后端。当我打开本地主机的API URL时,可以毫无问题地将信息发送到DRF。但不是Angular

(function () {
  'use strict';

  angular
    .module('thinkster.authentication.services')
    .factory('Authentication', Authentication);


  Authentication.$inject = ['$cookies', '$http'];


  function Authentication($cookies, $http) {

    var Authentication = {
      register: register
    };

    return Authentication;


    function register(email, password, username) {
      return $http.post('/api/v1/accounts/', {
        username: username,
        password: password,
        email: email,
      });
    }
  }
})();

这是我的表格:

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <h1>Register</h1>

    <div class="well">
      <form role="form" ng-submit="vm.register()">
        <div class="form-group">
          <label for="register__email">Email</label>
          <input type="email" class="form-control" id="register__email" ng-model="vm.email" placeholder="ex. john@notgoogle.com" />
        </div>

        <div class="form-group">
          <label for="register__username">Username</label>
          <input type="text" class="form-control" id="register__username" ng-model="vm.username" placeholder="ex. john" />
        </div>

        <div class="form-group">
          <label for="register__password">Password</label>
          <input type="password" class="form-control" id="register__password" ng-model="vm.password" placeholder="ex. thisisnotgoogleplus" />
        </div>

        <div class="form-group">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

编辑:

controller.js

/**
* Register controller
* @namespace thinkster.authentication.controllers
*/
(function () {
  'use strict';

  angular
    .module('thinkster.authentication.controllers', [])
    .controller('RegisterController', RegisterController);

  RegisterController.$inject = ['$location', '$scope', 'Authentication'];

  /**
  * @namespace RegisterController
  */
  function RegisterController($location, $scope, Authentication) {
    var vm = this;

    vm.register = register;

    /**
    * @name register
    * @desc Register a new user
    * @memberOf thinkster.authentication.controllers.RegisterController
    */
    function register() {
      Authentication.register(vm.email, vm.password, vm.username);
    }
  }
})();

enter image description here

路由模块:

(function () {
  'use strict';

  angular
    .module('thinkster.routes', [])
    .config(config);

  config.$inject = ['$routeProvider'];

  /**
  * @name config
  * @desc Define valid application routes
  */
  function config($routeProvider) {
    $routeProvider.when('/register', {
      controller: 'RegisterController', 
      controllerAs: 'vm',
      templateUrl: 'thinkster-django-angular-boilerplate/static/register.html'
    }).otherwise('/');
  }
})();

当我按提交按钮时,页面会重新加载,但我从未发送过数据,我不确定是什么问题使我完全按照本教程进行操作。我看了其他一些答案,但这可能是由于内容类型引起的吗?我已尝试实施它们,但不确定如何正确执行

0 个答案:

没有答案