Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Wscats opened this issue Nov 27, 2016 · 0 comments
Open

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

Wscats opened this issue Nov 27, 2016 · 0 comments

Comments

@Wscats
Copy link
Owner

Wscats commented Nov 27, 2016

方案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请求传递参数,服务端接收不到参数的解决方法

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant