javascript - 使用 Angular.js 中的 post 不起作用

Question

我构建了一个 Rest-API 来在 mongodb 中添加待办事项。我可以通过在 postman 中使用以下设置成功保存实例:

http://localhost:3000/api/addtodo x-www-form-urlencoded，值为 text="Test"，完成:“false”。

现在，当我尝试使用 Angular 复制此内容时，它不起作用，待办事项已保存，但没有文本和已完成的属性，我似乎无法从正文访问文本或已完成的值。我究竟做错了什么？代码如下:

Angular-HTML:

<div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>

                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
                </form>
            </div>
        </div>

Angular-js:

  $scope.createTodo = function() {
    $http.post('/api//addtodo', $scope.formData)
        .success(function(data) {
            $scope.formData = {}; // clear the form so our user is ready to enter another
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

REST-API:

router.post('/addtodo', function(req,res) {
  var Todo = require('../models/Todo.js');
  var todo = new Todo();

  todo.text = req.body.text;
  todo.completed = req.body.completed;

  todo.save(function (err) {
    if(!err) {
      return console.log("created");
    } else {
      return console.log(err);
    }
  });

  return res.send(todo);

});

Answer 1

$http.post 使用 application/json 而不是 application/x-www-form-urlencoded 发送数据。 Source .

如果您使用 body-parser，请确保您已包含 JSON 中间件。

app.use(bodyParser.json());

要么更改 Angular 默认标题。

module.run(function($http) {
    $http.defaults.headers.post = 'application/x-www-form-urlencoded';
});