今日在做前后端数据交互对接,使用的是前后分离模式,后端采用的是 PHP语言,而前端我先前想着的是用 JQUERY,因对 JQUERY 使用的较早之因,对其的用法比较熟悉。但近1年接触 Angular 后发现 Angular 在处理页面数据方面要比 JQUERY 强很多,使用 JQUERY 来处理代码量就不用说了其的灵活性不如 Angular,Angular 只需要通过双向绑定产生数据的互动,如同模板引擎。但对 Angular 熟悉度不够因此决定在数据处理方面使用 Angular,而页面的一些效果依旧租用 Jquery.
因对 Angular 的熟悉不够就遇到了在使用 $http 模块的 POST 提交时就遇到了问题, Angular 的默认 POST 提交是以 request payload,而非之前使用惯的 form data,而且 PHP 的 $_POST 只认得 form data。在使用这个问题后,我在网络上搜寻了一番,亲测后整理出两种有效的解决方法。
以下是 Angular 请求的两种类型的截图
request payload 类型
form data 类型
方案一、是通过修改 Angular 的配置来解决
1.配置$httpProvider
var myApp = angular.module('app',[]); myApp.config(function($httpProvider){ $httpProvider.defaults.transformRequest = function(obj){ var str = []; for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' } });
2、控制器中的 $http.post 提交
$http.post($scope.service_api, param).success(function (req) { console.log(req); });
方案二、是通过修改 PHP 的接收方式来解决
使用第二种方案的话,angularJS 的 app 的配置应该为:
app.config(function ($httpProvider) { $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded; charser=UTF-8', 'Accept': 'application/json, text/javascript, */*; q=0.01' } });
然后在 PHP 端写上以下的接收代码
$rawpostdata = file_get_contents("php://input"); $post = json_decode($rawpostdata, true);
转载请注明:隨習筆記 » AngularJS 中 $http 模块 POST 请求 request payload 转 form data