如何将AngularJS $资源中的params序列化为rails 3.2兼容的参数

Posted 2021-04-07

我正在尝试获取角度资源以将我的对象正确地序列化为rails 3.2控制器动作。数据格式是JSON，工作和必需的输入（在Rails端）应该是：

"data"=>[{"id"=>29, "column"=>0, "position"=>0}], "id"=>"2", "page"=>{}

这适用于我们的旧代码：

$.ajax
  type: "put"
  url: target
  dataType: "json"
  contentType: "application/json"
  data: JSON.stringify({data: widgets})

但是，如果我尝试使用角度资源，我会得到类似下面的内容：

"data"=>"[{"id":28,"column":2,"position":0}]", "id"=>"2", "page"=>{"id"=>"2"}

我首先创建了一个工厂：

app.factory "Page", ["$resource", ($resource) ->
  $resource "/admin/pages/:collectionRoute:id/:memberRoute",
  {
    id: "@id",
    memberRoute: "@memberRoute",
    collectionRoute: "@collectionRoute",
  },
  {
    update: {method: "PUT"}
    store_widgets: { method: "PUT", params: { data: "@data", memberRoute: 'store_widgets' }, isArray: true }
  }
]

...并用以下方法调用store_widgets函数：

Page.store_widgets(id: $scope.page_id, data: JSON.stringify(widgets) )

我尝试了一些替代方法来设置数据参数，但它似乎不起作用。它既可以作为[Object object]发布，也可以作为普通字符串发布。

有关如何获取$ resource发送的请求的建议与使用纯jQuery Ajax的请求完全相同？

答案

根据您是否希望data在请求正文或查询参数中传递：

在查询参数中：

// 'store_widgets' action definition
store_widgets: {
  method: "PUT",
  params: {
    id: "@id",
    data: "@data",
    memberRoute: 'store_widgets'
  },
  isArray: true
}

呼叫：

function MyCtrl($scope, Page) {

  $scope.widget = [
    {"id":29, "column":0, "position":0}
  ];

  Page.store_widgets({id: 2, data: $scope.widget, page: {}});

}

Plunker。

---

In request body:

呼叫：

Page.store_widgets({id: 2, page: {}}, {data: $scope.widget});

---

Ass $resource docs say:

可以使用以下参数调用类对象或实例对象上的操作方法：

1. HTTP GET“类”操作：Resource.action（[parameters]，[success]，[error]）
2. 非GET“类”操作：Resource.action（[parameters]，postData，[success]，[error]）
3. 非GET实例操作：实例。$ action（[参数]，[成功]，[错误]）

另一答案

唯一的方法是我能够解决序列化我的参数，所以我可以看到php POST通道中的数据是使用JQuery.param（）。

我必须在我的$资源中设置标题：

headers : {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

我调用$ resource方法。这很快又脏，请原谅。

vm.save = function(item) { 
  var data = $.param({username:item.username, email:item.email});
  userFactory.save(data);
}

我不得不从item中提取数据，因为$ resouce附加方法到item。如果你在$.param上使用item，它最终会触发附加到资源的所有DELETE，GET，QUERY等方法。

另一答案

这个问题在2.0版本的角度解决（

看这里：https://github.com/angular/angular.js/issues/3740