Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Angular的post请求后台接受不了数据的解决方法 #30

Open
@Wscats

Description

方案1

加上这个模块,这里改写了**$httpProvider**服务

angular.module('MyModule', [], function($httpProvider) {
	// Use x-www-form-urlencoded Content-Type
	$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
	/**
	 * The workhorse; converts an object to x-www-form-urlencoded serialization.
	 * @param {Object} obj
	 * @return {String}
	 */
	var param = function(obj) {
		var query = '',
			name, value, fullSubName, subName, subValue, innerObj, i;
		for(name in obj) {
			value = obj[name];
			if(value instanceof Array) {
				for(i = 0; i < value.length; ++i) {
					subValue = value[i];
					fullSubName = name + '[' + i + ']';
					innerObj = {};
					innerObj[fullSubName] = subValue;
					query += param(innerObj) + '&';
				}
			} else if(value instanceof Object) {
				for(subName in value) {
					subValue = value[subName];
					fullSubName = name + '[' + subName + ']';
					innerObj = {};
					innerObj[fullSubName] = subValue;
					query += param(innerObj) + '&';
				}
			} else if(value !== undefined && value !== null)
				query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
		}
		return query.length ? query.substr(0, query.length - 1) : query;
	};
	// Override $http service's default transformRequest
	$httpProvider.defaults.transformRequest = [function(data) {
		return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
	}];
});
var app = angular.module('wscat', ['MyModule']);
app.controller('loginCtrl', function($scope, $http) {
	$scope.name = 'wscat';
	$scope.submit = function() {
		$http.post('http://localhost/CI/myCi/index.php/login_api/login', {
			params: {
				username: $scope.username,
				password: $scope.password
			}
		}).success(function(data) {
		})
	}
})

更改前的数据格式为
image

更改过后数据格式为下图
image

我们就可以在后台获取数据了

public
 function login() {
 	$this -> load -> model('login_model');
 $data = array(
 'user_name' => $this->input->post('params')['username'],
 'password' => md5($this->input->post('params')['password'])
 );
 //or
 var_dump($_POST['params']);
 }

方案2

image

原因:可以发现传参方式是request payload,参数格式是json,而并非用的是form传参,所以在后台用接收form数据的方式接收参数就接收不到了

POST表单请求提交时,使用的Content-Typeapplication/x-www-form-urlencoded
而此处的Content-Type是:

image

解决:增添两段代码,代码如下;

$http({
	method: 'post',
	url: 'http://localhost:8081/search',
	data: {
		"page": page,
		"pageNum": pageNum
	},
	headers: { //1.设置类型
		'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
	},
	transformRequest: function(obj) { //2.处理传递参数的格式
		var str = [];
		for(var p in obj) {
			str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]))
		}
		return str.join('&')
	}
}).then(function(data) {
}, function(err) {
});

现在的谷歌监视为:
image

现在传参方式就变成form方式了,然后后端就可以正常接收参数了!

参考文档:Angular中的POST请求传递参数,服务端接收不到参数的解决方法

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions

        AltStyle によって変換されたページ (->オリジナル) /