请求angular.js $http(或$resource)POST和transformRequest作为
使用角度1.1.5并需要将urlencoded数据传递给后端.我从这里开始使用解决方案:
How can I post data as form data instead of a request payload? $http({ method: 'POST',url: url,headers: {'Content-Type': 'application/x-www-form-urlencoded'},transformRequest: function(obj) { var str = []; for(var p in obj) str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); return str.join("&"); },data: xsrf }).success(function () {}); 我已经成功地将它嵌入到我的控制器中,但“更清洁”的方式是使用服务和$resource而不是$http对象.
$RESOURCE示例
对于csrf,在rails应用程序中,您必须添加<%= csrf_meta_tags%>在标题布局中(如果没有默认情况下) var app = angular.module('app',['ngResource']); app.config(["$httpProvider",function(provider) { provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content'); }]); 这是一个服务对象 app.factory('$folders',['$resource',function($resource) { return $resource('/folders/:id',{ id: '@id' },{ list: { method: 'GET',isArray: true },//same as query create: { method: 'POST' },// same as save update: { method: 'PUT' } // DEFAULT IMPLEMENTATION OF $RESOURCE // 'get': {method:'GET'},// 'save': {method:'POST'},// 'query': {method:'GET',isArray:true},// 'remove': {method:'DELETE'},// 'delete': {method:'DELETE'} }); }]); 这是一个控制器的例子 app.controller('projectController',['$scope','$folders',function($scope,$folders) { $scope.folders = $folders.list(); }]); Folders.list()将自动在服务器上执行GET / folders /并将结果(应该是json)作为对象返回. 小费: 直接在$scope.folders = Folders.list()之后;在控制器中,$scope.folders将为空,当响应从服务器返回时,它将及时填充. $http和$ressources的简单示例 关于表格 这是一个表格 %form{'ng-submit' => 'create(item)','ng-controller' => 'projectController','ng-init' => 'item.orientation=1;'} %input{'ng-model'=>'item.folderName',:type => :text,:placeholder => 'Name',:name => 'folderName'} %textarea{'ng-model'=>'item.description',:placeholder => 'Description',:required=>true,:name => 'description'} %input{'ng-model'=>'item.orientation',:type=>'radio',:name=>'orientation',:value=>'1'} %input{'ng-model'=>'item.orientation',:value=>'2'} %input{:type => :submit,:value => 'Create',:name => 'new-project'} 你会注意到ng模型. ‘NG-INIT’=> ‘item.orientation = 1;’将要执行表达式.所以它将执行以下item.orientation = 1,这样我们设置了无线电输入的默认值,这么简单. 提交表单时,ng-submit将捕获它并使用itemas参数从projectController调用create操作,不需要说该项将包含输入值吗? 这是控制器部分 app.controller('projectController',$folders) { $scope.create = function(item) { f = new $folders(item); f.$save(function(data,headers) { alert('SAVED'); },function(err,headers) { alert('FAILED'); }); }; }]); $scope.create是将由ng-submit调用的操作,item也是表单中的item参数,因此你可以找到诸如item.description之类的内容. 文件夹是我们之前谈到的服务对象. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |