每天学习一点点,成功增加一大步

AngularJS 中 $http 模块 POST 请求 request payload 转 form data

AngularJS zhanghui 1411℃

今日在做前后端数据交互对接,使用的是前后分离模式,后端采用的是 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 类型

request payload

form data 类型

20160621133339

方案一、是通过修改 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