节点js从angular PUT调用接收到错误的数据

node js receives wrong data from angular PUT call

本文关键字:错误 数据 调用 js angular PUT 节点      更新时间:2023-09-26

我正在angular中实现一个rest crud客户端,该客户端将数据发送到节点api(我也在实现)

当我尝试用ngResource将数据从表单->angular发送到节点api时,就像一样

  cmsApp.factory('Misc', ['$resource', function($resource) {
      return $resource('/api/misc/:id', {}, {
          'update': { method:'PUT' } // the $resource obj comes with save/query/get/delete but lacks the update-put method
      });
  }]);

因此我得到一个错误

  Error: invalid json

现在,我在这篇(旧的)文章之后找到了一个变通方法

 cmsApp.config(function ($httpProvider) {
      $httpProvider.defaults.transformRequest = function (data) {
          var str = [];
          for (var p in data) {
              data[p] !== undefined && str.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p]));
          }
          return str.join('&');
      };
      $httpProvider.defaults.headers.put['Content-Type'] = $httpProvider.defaults.headers.post['Content-Type'] = 
      'application/x-www-form-urlencoded; charset=UTF-8';
  });

这个技巧有点奏效,但会破坏数组中的所有字符串,例如,如果我有一个像这样的字符串

 "foo bar"

我在另一边得到的是

  {
    '0': 'f',
    '1': 'o',
    '2': 'o',
    '3': ' ',
    '4': 'b',
    '5': 'a',
    '6': 'r'
  }

这显然是无法使用的数据。

我想知道让这项工作正常进行的正确方法,或者如果有其他正确的模式,让它正确进行。

附录A

nodejs接收器代码

    router.route('/misc/:misctype')
    .put(function(req, res) {
        console.log(req.body.text_label);
    });

为什么不将数据作为json发送?您正在自己实现这两个目的,并在两者中都使用javascript。JSON非常适合这个用例。例如,在angular中,您可以执行以下操作:

// in some template (template.tpl.html)
<form>
  field
  <input name="name" ng-model="someObject.field"></input>
  other field
  <input name="email" ng-model="someObject.otherField"></input>
  <button ng-click="sendData">Submit</button>
</form>
//in the controller (myController.js)
$scope.someObject = {};
$scope.sendData = function () {
    doSomeValidation();
    $http.put('http://www.myservice.com/api/whatever', someObject)
    .success(function(result){
         console.log('it worked!'); 
     });
}

$http服务知道默认情况下编码为JSON,ng模型允许您轻松绑定到表单元素,因此没有理由将表单库引入其中。然后在节点后端,您只需要JSON.parse(request.body),或者如果您使用Express,是否可以使用中间件来实现这一点。

有关$http对象的信息,您可以在此处查看有关该主题的angular文档

尝试使用不同的内容类型

"application/json;charset=utf-8"

事实证明,这个问题与我本可以避免的所有混乱有关

cmsApp.config(function ($httpProvider) { ..... }

部分,并将我发送的对象设置为json,因为首先我有这个

Misc.update({ id:'text_descr_assoc' }, $scope.description);

通过在json-obj中转换它,并删除现在无用的cmsApp.config部分,一切都很好

Misc.update({ id:'text_descr_assoc' }, {"my_key":$scope.description});