有人能告诉我为什么下面的语句没有将post数据发送到指定的url吗?url被调用，但在服务器上，当我打印$_POST -我得到一个空数组。如果我在控制台中打印消息，然后将其添加到数据-它显示了正确的内容。
$http.post('request-url', { 'message' : message });
我也尝试过将数据作为字符串(具有相同的结果):
$http.post('request-url', "message=" + message);
当我以以下格式使用它时，它似乎正在工作:
$http({
method: 'POST',
url: 'request-url',
data: "message=" + message,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
但是是否有一种方法可以用$http.post() -我总是必须包括头以便它工作吗?我相信上面的内容类型是指定发送数据的格式，但我可以把它作为javascript对象发送吗?
我知道已经接受了答案。但是，如果这个答案因为任何原因不适合他们，下面的内容可能会对未来的读者有所帮助。
Angular不会像jQuery那样使用ajax。当我尝试按照指南修改angular $httpprovider时，我遇到了其他问题。例如，我使用codeigniter，其中$this->input->is_ajax_request()函数总是失败(这是由另一个程序员编写的，并在全局使用，所以不能改变)说这不是真正的ajax请求。
为了解决这个问题，我接受了延期承诺的帮助。我在Firefox和ie9上进行了测试，效果很好。
我在angular代码的外部定义了以下函数。这个函数使常规jquery ajax调用和返回延迟/承诺(我仍在学习)对象。
function getjQueryAjax(url, obj){
return $.ajax({
type: 'post',
url: url,
cache: true,
data: obj
});
}
然后我用下面的代码称它为角代码。请注意，我们必须使用$scope.$apply()手动更新$scope。
var data = {
media: "video",
scope: "movies"
};
var rPromise = getjQueryAjax("myController/getMeTypes" , data);
rPromise.success(function(response){
console.log(response);
$scope.$apply(function(){
$scope.testData = JSON.parse(response);
console.log($scope.testData);
});
}).error(function(){
console.log("AJAX failed!");
});
这可能不是完美的答案，但它允许我在angular中使用jquery ajax调用，并允许我更新$scope。
我一直在使用公认的答案的代码(Felipe的代码)一段时间，它工作得很好(谢谢，Felipe!)。
但是，最近我发现它有空对象或数组的问题。
例如，当提交这个对象时:
{
A: 1,
B: {
a: [ ],
},
C: [ ],
D: "2"
}
PHP似乎根本看不到B和C。结果是这样的:
[
"A" => "1",
"B" => "2"
]
看看实际的请求在Chrome显示:
A: 1
:
D: 2
我写了一个替代代码片段。它似乎在我的用例中工作得很好，但我还没有对它进行广泛测试，所以请谨慎使用。
我使用TypeScript，因为我喜欢强类型，但它很容易转换为纯JS:
angular.module("MyModule").config([ "$httpProvider", function($httpProvider: ng.IHttpProvider) {
// Use x-www-form-urlencoded Content-Type
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
function phpize(obj: Object | any[], depth: number = 1): string[] {
var arr: string[] = [ ];
angular.forEach(obj, (value: any, key: string) => {
if (angular.isObject(value) || angular.isArray(value)) {
var arrInner: string[] = phpize(value, depth + 1);
var tmpKey: string;
var encodedKey = encodeURIComponent(key);
if (depth == 1) tmpKey = encodedKey;
else tmpKey = `[${encodedKey}]`;
if (arrInner.length == 0) {
arr.push(`${tmpKey}=`);
}
else {
arr = arr.concat(arrInner.map(inner => `${tmpKey}${inner}`));
}
}
else {
var encodedKey = encodeURIComponent(key);
var encodedValue;
if (angular.isUndefined(value) || value === null) encodedValue = "";
else encodedValue = encodeURIComponent(value);
if (depth == 1) {
arr.push(`${encodedKey}=${encodedValue}`);
}
else {
arr.push(`[${encodedKey}]=${encodedValue}`);
}
}
});
return arr;
}
// Override $http service's default transformRequest
(<any>$httpProvider.defaults).transformRequest = [ function(data: any) {
if (!angular.isObject(data) || data.toString() == "[object File]") return data;
return phpize(data).join("&");
} ];
} ]);
它的效率比Felipe的代码低，但我认为这无关紧要，因为与HTTP请求本身的整体开销相比，它应该是即时的。
现在PHP显示:
[
"A" => "1",
"B" => [
"a" => ""
],
"C" => "",
"D" => "2"
]
据我所知，让PHP识别B.a和C是空数组是不可能的，但至少键会出现，当代码依赖于某个结构时，这很重要，即使它内部实际上是空的。
还要注意，它将未定义的和null转换为空字符串。
只是提出一个现代化版本的@FelipeMiosso的答案:
.config(["$httpProvider", function ($httpProvider) {
function buildKey(parentKey, subKey) {
return parentKey + "[" + subKey + "]";
}
function buildObject(key, value) {
var object = {};
object[key] = value;
return object;
}
function join(array) {
return array.filter(function (entry) {
return entry;
}).join("&");
}
function arrayToQueryString(parentKey, array) {
return join(array.map(function (value, subKey) {
return toQueryString(buildObject(buildKey(parentKey, subKey), value));
}));
}
function objectToQueryString(parentKey, object) {
return join(Object.keys(object).map(function (subKey) {
return toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]));
}));
}
function toQueryString(input) {
return join(Object.keys(input).map(function (key) {
var value = input[key];
if (value instanceof Array) {
return arrayToQueryString(key, value);
} else if (value instanceof Object) {
return objectToQueryString(key, value);
} else if (undefined !== value && null !== value) {
return encodeURIComponent(key) + "=" + encodeURIComponent(value);
} else {
return "";
}
}));
}
function isQueryStringEligible(input) {
return null !== input && "object" === typeof input && "[object File]" !== String(input);
}
var interceptor = [function () {
return {
request: function (config) {
if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
config.data = toQueryString(config.data);
}
return config;
}
};
}];
$httpProvider.interceptors.push(interceptor);
}])
ES6版本:
.config(["$httpProvider", function ($httpProvider) {
"use strict";
const buildKey = (parentKey, subKey) => `${parentKey}[${subKey}]`;
const buildObject = (key, value) => ({ [key]: value });
const join = (array) => array.filter((entry) => entry).join("&");
const arrayToQueryString = (parentKey, array) =>
join(array.map((value, subKey) =>
toQueryString(buildObject(buildKey(parentKey, subKey), value))));
const objectToQueryString = (parentKey, object) =>
join(Object.keys(object).map((subKey) =>
toQueryString(buildObject(buildKey(parentKey, subKey), object[subKey]))));
const toQueryString = (input) => join(Object.keys(input).map((key) => {
const value = input[key];
if (value instanceof Array) {
return arrayToQueryString(key, value);
} else if (value instanceof Object) {
return objectToQueryString(key, value);
} else if (undefined !== value && null !== value) {
return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
} else {
return "";
}
}));
const isQueryStringEligible = (input) =>
null !== input && "object" === typeof input && "[object File]" !== String(input);
const interceptor = [() => ({
request(config) {
if (0 <= ["post", "put", "patch"].indexOf(config.method.toLowerCase()) && isQueryStringEligible(config.data)) {
config.headers["Content-Type"] = "application/x-www-form-urlencoded;charset=utf-8";
config.data = toQueryString(config.data);
}
return config;
}
})];
$httpProvider.interceptors.push(interceptor);
}])
我知道已经接受了答案。但是，如果这个答案因为任何原因不适合他们，下面的内容可能会对未来的读者有所帮助。
Angular不会像jQuery那样使用ajax。当我尝试按照指南修改angular $httpprovider时，我遇到了其他问题。例如，我使用codeigniter，其中$this->input->is_ajax_request()函数总是失败(这是由另一个程序员编写的，并在全局使用，所以不能改变)说这不是真正的ajax请求。
为了解决这个问题，我接受了延期承诺的帮助。我在Firefox和ie9上进行了测试，效果很好。
我在angular代码的外部定义了以下函数。这个函数使常规jquery ajax调用和返回延迟/承诺(我仍在学习)对象。
function getjQueryAjax(url, obj){
return $.ajax({
type: 'post',
url: url,
cache: true,
data: obj
});
}
然后我用下面的代码称它为角代码。请注意，我们必须使用$scope.$apply()手动更新$scope。
var data = {
media: "video",
scope: "movies"
};
var rPromise = getjQueryAjax("myController/getMeTypes" , data);
rPromise.success(function(response){
console.log(response);
$scope.$apply(function(){
$scope.testData = JSON.parse(response);
console.log($scope.testData);
});
}).error(function(){
console.log("AJAX failed!");
});
这可能不是完美的答案，但它允许我在angular中使用jquery ajax调用，并允许我更新$scope。
