angularjs - 使用 POST 方法发送时出现 JSON 格式错误

Question

我的 json 帖子中的“格式”有问题

我有一个像这样的 HTML-Angular 表单

<form name="signupForm" ng-submit="processForm()">
    <input name="names" ng-model="userInfo.names" type="text" class="form-control" required>
    <input name="lastName" ng-model="userInfo.lastName"  type="text" class="form-control" required>
    <input name="city" ng-model="userInfo.personals.city" type="text" class="form-control" required>
    <input name="cellNumber" ng-model= "userInfo.personals.cellNumber" type="text" required>
    <select multiple chosen class="chosen-select" ng-model="userInfo.personals.area">
        <option value="1">OP1</option>
        <option value="2">OP2</option>
        <option value="3">OP3</option>
    </select>
    <button type="submit" class="btn btn-success" ng-disabled="signupForm.$invalid">Post</button>
</form>

我的 Controller 是

function mainCTRL ($scope, $rootScope, $timeout, notify, $http) {
    $scope.processForm = function() {
        $http.post('/register', $scope.userInfo).success(function(res){console.log(res);});
    };
}

我的问题是当我的 api 获取 JSON 时，它看起来像

{
    names: "name",
    lastname: "last",
    personals: {
        city: "city",
        cellNumber: "12345",
        area: ['1','2']
    }
}

然后我尝试将其保存在模型中

router.post('/register', function(req, res, next){
    console.log(req.body);
    var perfil = new Perfiles(req.body);
    perfil.save(function(err, perfil){
         if(err){return next(err);}
            res.json(perfil);
    });
});

但它向我显示 500 错误。如果我使用 Postman 发送帖子，则请求格式不同并且可以保存

{
        names: "name",
        lastname: "last",
        personals.city: "city",
        personals.cellNumber: "12345",
        personals.area: ['1','2']
        }
  }

这两种方法有什么区别？

Answer 1

如您所知，请求的数据类型有两种:form类型和json类型。

所以你在发帖的时候需要判断请求数据的类型。

$http({
    data: $scope.userInfo,
    method: "POST",
    url: "/register",
    headers: {
        'content-type': "application/x-www-form-urlencoded"
    },
    dataType: 'JSON',
}).then(function mySucces(res) {
   console.log(res);
});

而Postman的结果和其中一个网站不一样的原因只是你错过了POSTMAN的数据类型选择。

请尝试选择以下类型并重新发送。

提交时可以从html表单中获取json值。

<form name="signupForm" ng-submit="processForm(userInfo)">
    <input name="names" ng-model="userInfo.names" type="text" class="form-control" required>
    <input name="lastName" ng-model="userInfo.lastName"  type="text" class="form-control" required>
    <input name="city" ng-model="userInfo.personals.city" type="text" class="form-control" required>
    <input name="cellNumber" ng-model= "userInfo.personals.cellNumber" type="text" required>
    <select multiple chosen class="chosen-select" ng-model="userInfo.personals.area">
        <option value="1">OP1</option>
        <option value="2">OP2</option>
        <option value="3">OP3</option>
    </select>
    <button type="submit" class="btn btn-success" ng-disabled="signupForm.$invalid">Post</button>
</form>

....

$scope.processForm = function(userInfo) {
  console.log(userinfo);
}