Reputation: 5311
Could anyone tell me why the following statement does not send the post data to the designated url? The url is called but on the server when I print $_POST - I get an empty array. If I print message in the console before adding it to the data - it shows the correct content.
$http.post('request-url', { 'message' : message });
I've also tried it with the data as string (with the same outcome):
$http.post('request-url', "message=" + message);
It seem to be working when I use it in the following format:
$http({
method: 'POST',
url: 'request-url',
data: "message=" + message,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
});
but is there a way of doing it with the $http.post() - and do I always have to include the header in order for it to work? I believe that the above content type is specifying format of the sent data, but can I send it as javascript object?
Upvotes: 343
Views: 746025
Reputation: 7339
I had the same problem using asp.net MVC and found the solution here
There is much confusion among newcomers to AngularJS as to why the
$http
service shorthand functions ($http.post()
, etc.) don’t appear to be swappable with the jQuery equivalents (jQuery.post()
, etc.)The difference is in how jQuery and AngularJS serialize and transmit the data. Fundamentally, the problem lies with your server language of choice being unable to understand AngularJS’s transmission natively ... By default, jQuery transmits data using
Content-Type: x-www-form-urlencoded
and the familiar
foo=bar&baz=moe
serialization.
AngularJS, however, transmits data using
Content-Type: application/json
and
{ "foo": "bar", "baz": "moe" }
JSON serialization, which unfortunately some Web server languages—notably PHP—do not unserialize natively.
Works like a charm.
CODE
// Your app's root module...
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;
}];
});
Upvotes: 348
Reputation: 1
I had this problem, the issue was i was not able to get the data while posting using above mentioned header i.e.
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
}
While using jquery Ajax we were usually getting data in response.body at the backend server, but while implementing Angular ajax the data was not coming in response.body instead it was coming under
request.getParameterMap.keySet().iterator().next()
Upvotes: 0
Reputation: 48817
Just proposing a modernized version of @FelipeMiosso's answer:
.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 version:
.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);
}])
Upvotes: 0
Reputation: 1708
Found the simple solution on
http://jasonwatmore.com/post/2014/04/18/post-a-simple-string-value-from-angularjs-to-net-web-api
return $http.post(Config.apiUrl + '/example/processfile', '"' + fileName + '"');
Upvotes: 0
Reputation: 6497
Just put the data you want to send as second parameter:
$http.post('request-url', message);
Another form which also works is:
$http.post('request-url', { params: { paramName: value } });
Make sure that paramName
exactly matches the name of the parameter of the function you are calling.
Source: AngularJS post shortcut method
Upvotes: 3
Reputation: 664
In my case I resolve the problem like this :
var deferred = $q.defer();
$http({
method: 'POST',
url: 'myUri',
data: $.param({ param1: 'blablabla', param2: JSON.stringify(objJSON) }),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(
function(res) {
console.log('succes !', res.data);
deferred.resolve(res.data);
},
function(err) {
console.log('error...', err);
deferred.resolve(err);
}
);
return deferred.promise;
You need to use JSON.stringify for each param containing a JSON object, and then build your data object with "$.param" :-)
NB : My "objJSON" is a JSON object containing array, integer, string and html content. His total size is >3500 characters.
Upvotes: 5
Reputation: 2815
Similar to the OP's suggested working format & Denison's answer, except using $http.post
instead of just $http
and is still dependent on jQuery.
The good thing about using jQuery here is that complex objects get passed properly; against manually converting into URL parameters which may garble the data.
$http.post( 'request-url', jQuery.param( { 'message': message } ), {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
Upvotes: 4
Reputation: 399
this is probably a late answer but i think the most proper way is to use the same piece of code angular use when doing a "get" request using you $httpParamSerializer
will have to inject it to your controller
so you can simply do the following without having to use Jquery at all ,
$http.post(url,$httpParamSerializer({param:val}))
app.controller('ctrl',function($scope,$http,$httpParamSerializer){
$http.post(url,$httpParamSerializer({param:val,secondParam:secondVal}));
}
Upvotes: 4
Reputation: 24400
If using Angular >= 1.4, here's the cleanest solution using the serializer provided by Angular:
angular.module('yourModule')
.config(function ($httpProvider, $httpParamSerializerJQLikeProvider){
$httpProvider.defaults.transformRequest.unshift($httpParamSerializerJQLikeProvider.$get());
$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
});
And then you can simply do this anywhere in your app:
$http({
method: 'POST',
url: '/requesturl',
data: {
param1: 'value1',
param2: 'value2'
}
});
And it will correctly serialize the data as param1=value1¶m2=value2
and send it to /requesturl
with the application/x-www-form-urlencoded; charset=utf-8
Content-Type header as it's normally expected with POST requests on endpoints.
TL;DR
During my research I found that the answer to this problem comes in many different flavors; some are very convoluted and depend on custom functions, some depend on jQuery and and some are incomplete in suggesting that you only need to set the header.
If you just set the Content-Type
header, the end point will see the POST data, but it won't be in the standard format because unless you provide a string as your data
, or manually serialize your data object, it will all be serialized as JSON by default and may be incorrectly interpreted at the endpoint.
e.g. if the correct serializer was not set in the above example, it would be seen in the endpoint as:
{"param1":"value1","param2":"value2"}
And that can lead to unexpected parsing, e.g. ASP.NET treats it as a null
parameter name, with {"param1":"value1","param2":"value2"}
as value; or Fiddler interprets it the other way, with {"param1":"value1","param2":"value2"}
as the parameter name, and null
as the value.
Upvotes: 3
Reputation: 4157
It's not angular's fault. Angular is designed to work in JSON world. So when $http service send AJAX request, it send all your data as a payload, not as form-data so that your backend application can handle it. But jQuery does some things internally. You instruct jQuery's $ajax module to bind form-data as JSON but before sending AJAX request, it serialized JSON and add application/x-www-form-urlencoded
header. This way your backend application able to received form-data in form of post parameters and not JSON.
But you can modify angular $http service's default behavior by
$httpParamSerializerJQLike is angular's in-built service which serializes json in the same way $.param does of jQuery.
$http({
method: 'POST',
url: 'request-url',
data: $httpParamSerializerJQLike(json-form-data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8;'
}
});
If you need a plugin to serialize form-data into JSON first, use this one https://github.com/marioizquierdo/jquery.serializeJSON
Upvotes: 1
Reputation: 1585
Add this in your js file:
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
and add this to your server file:
$params = json_decode(file_get_contents('php://input'), true);
That should work.
Upvotes: 5
Reputation: 313
By using very simple method, we can follow this:
$http({
url : "submit_form_adv.php",
method : 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function(obj) {
var str = [];
for(var p in obj)
str.push(encodeURIComponent(p)+' = '+encodeURIComponent(obj[p]));
return str.join('&');
},
data : {sample_id : 100, sample_name: 'Abin John'},
}).success(function(data, status, headers, config) {
}).error(function(ata, status, headers, config) {
});
Upvotes: 0
Reputation: 407
If your using PHP this is a easy way to access an array in PHP from an AngularJS POST.
$params = json_decode(file_get_contents('php://input'),true);
Upvotes: 3
Reputation: 1206
Didn't find a complete code snippet of how to use $http.post method to send data to the server and why it was not working in this case.
Explanations of below code snippet...
Setting the Content-Type in the config variable that will be passed along with the request of angularJS $http.post that instruct the server that we are sending data in www post format.
Notice the $htttp.post method, where I am sending 1st parameter as url, 2nd parameter as data (serialized) and 3rd parameter as config.
Remaining code is self understood.
$scope.SendData = function () {
// use $.param jQuery function to serialize data from JSON
var data = $.param({
fName: $scope.firstName,
lName: $scope.lastName
});
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post('/ServerRequest/PostDataResponse', data, config)
.success(function (data, status, headers, config) {
$scope.PostDataResponse = data;
})
.error(function (data, status, header, config) {
$scope.ResponseDetails = "Data: " + data +
"<hr />status: " + status +
"<hr />headers: " + header +
"<hr />config: " + config;
});
};
Look at the code example of $http.post method here.
Upvotes: 3
Reputation: 7808
I've been using the accepted answer's code (Felipe's code) for a while and it's been working great (thanks, Felipe!).
However, recently I discovered that it has issues with empty objects or arrays. For example, when submitting this object:
{
A: 1,
B: {
a: [ ],
},
C: [ ],
D: "2"
}
PHP doesn't seem to see B and C at all. It gets this:
[
"A" => "1",
"B" => "2"
]
A look at the actual request in Chrome shows this:
A: 1
:
D: 2
I wrote an alternative code snippet. It seems to work well with my use-cases but I haven't tested it extensively so use with caution.
I used TypeScript because I like strong typing but it would be easy to convert to pure 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("&");
} ];
} ]);
It's less efficient than Felipe's code but I don't think it matters much since it should be immediate compared to the overall overhead of the HTTP request itself.
Now PHP shows:
[
"A" => "1",
"B" => [
"a" => ""
],
"C" => "",
"D" => "2"
]
As far as I know it's not possible to get PHP to recognize that B.a and C are empty arrays, but at least the keys appear, which is important when there's code that relies on the a certain structure even when its essentially empty inside.
Also note that it converts undefineds and nulls to empty strings.
Upvotes: 2
Reputation: 2638
I wrote a small PHP helper function that allows both types of input parameters :
function getArgs () {
if ($input = file_get_contents('php://input') && $input_params = json_decode($input,true))
return $input_params + $_POST + $_GET;
return $_POST + $_GET;
}
Usage :
<?php
include("util.php"); # above code
$request = getArgs();
$myVar = "";
if (isset($request['myVar']))
$myVar = $request['myVar'];
?>
Therefore no changes required to your JavaScript.
Upvotes: 0
Reputation: 739
This has finally been addressed in angular 1.4 using $httpParamSerializerJQLike
See https://github.com/angular/angular.js/issues/6039
.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
method: 'POST',
url: baseUrl,
data: $httpParamSerializerJQLike({
"user":{
"email":"[email protected]",
"password":"123456"
}
}),
headers:
'Content-Type': 'application/x-www-form-urlencoded'
})})
Upvotes: 30
Reputation: 545
use this way. no need to write so much
isAuth = $http.post("Yr URL", {username: username, password: password});
and in the nodejs back end
app.post("Yr URL",function(req,resp)
{
var username = req.body.username||req.param('username');
var password = req.body.password||req.param('password');
}
I hope this helps
Upvotes: 0
Reputation: 429
This code solved the issue for me. It is an application-level solution:
moduleName.config(['$httpProvider',
function($httpProvider) {
$httpProvider.defaults.transformRequest.push(function(data) {
var requestStr;
if (data) {
data = JSON.parse(data);
for (var key in data) {
if (requestStr) {
requestStr += "&" + key + "=" + data[key];
} else {
requestStr = key + "=" + data[key];
}
}
}
return requestStr;
});
$httpProvider.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
}
]);
Upvotes: 6
Reputation: 2258
Angular
var payload = $.param({ jobId: 2 });
this.$http({
method: 'POST',
url: 'web/api/ResourceAction/processfile',
data: payload,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
WebAPI 2
public class AcceptJobParams
{
public int jobId { get; set; }
}
public IHttpActionResult ProcessFile([FromBody]AcceptJobParams thing)
{
// do something with fileName parameter
return Ok();
}
Upvotes: 6
Reputation: 305
I am using asp.net WCF webservices with angular js and below code worked:
$http({
contentType: "application/json; charset=utf-8",//required
method: "POST",
url: '../../operation/Service.svc/user_forget',
dataType: "json",//optional
data:{ "uid_or_phone": $scope.forgettel, "user_email": $scope.forgetemail },
async: "isAsync"//optional
}).success( function (response) {
$scope.userforgeterror = response.d;
})
Hope it helps.
Upvotes: 3
Reputation: 26071
I use jQuery param with AngularJS post requrest. Here is a example ... create AngularJS application module, where myapp
is defined with ng-app
in your HTML code.
var app = angular.module('myapp', []);
Now let us create a Login controller and POST email and password.
app.controller('LoginController', ['$scope', '$http', function ($scope, $http) {
// default post header
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
// send login data
$http({
method: 'POST',
url: 'https://example.com/user/login',
data: $.param({
email: $scope.email,
password: $scope.password
}),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function (data, status, headers, config) {
// handle success things
}).error(function (data, status, headers, config) {
// handle error things
});
}]);
I don't like to exaplain the code, it is simple enough to understand :) Note that param
is from jQuery, so you must install both jQuery and AngularJS to make it working. Here is a screenshot.
Hope this is helpful. Thanks!
Upvotes: 20
Reputation: 3511
I solved this by below codes:
Client Side (Js):
$http({
url: me.serverPath,
method: 'POST',
data: data,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
}).
success(function (serverData) {
console.log("ServerData:", serverData);
......
notice that data is an object.
On the server (ASP.NET MVC):
[AllowCrossSiteJson]
public string Api()
{
var data = JsonConvert.DeserializeObject<AgentRequest>(Request.Form[0]);
if (data == null) return "Null Request";
var bl = Page.Bl = new Core(this);
return data.methodName;
}
and 'AllowCrossSiteJsonAttribute' is needed for cross domain requests:
public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
base.OnActionExecuting(filterContext);
}
}
Hope this was useful.
Upvotes: 1
Reputation: 6280
To send data via Post methode with $http
of angularjs you need to change
data: "message=" + message
, with data: $.param({message:message})
Upvotes: 8
Reputation: 133
Just updated from angular 1.2 to 1.3, have found a problem in the code. Transforming a resource will lead to an endless-loop because (I think) of the $promise holding again the same object. Maybe it will help someone...
I could fix that by:
[...]
/**
* 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;
angular.forEach(obj, function(value, name) {
+ if(name.indexOf("$promise") != -1) {
+ return;
+ }
value = obj[name];
if (value instanceof Array) {
for (i = 0; i < value.length; ++i) {
[...]
Upvotes: 2
Reputation: 23766
I had the same problem in express .. to resolve you have to use bodyparser to parse json objects before sending http requests ..
app.use(bodyParser.json());
Upvotes: 3
Reputation: 3565
You can set the default "Content-Type" like this:
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";
About the data
format:
The $http.post and $http.put methods accept any JavaScript object (or a string) value as their data parameter. If data is a JavaScript object it will be, by default, converted to a JSON string.
Try to use this variation
function sendData($scope) {
$http({
url: 'request-url',
method: "POST",
data: { 'message' : message }
})
.then(function(response) {
// success
},
function(response) { // optional
// failed
});
}
Upvotes: 78
Reputation: 21765
Unlike JQuery and for the sake of pedantry, Angular uses JSON format for POST data transfer from a client to the server (JQuery applies x-www-form-urlencoded presumably, although JQuery and Angular uses JSON for data imput). Therefore there are two parts of problem: in js client part and in your server part. So you need:
put js Angular client part like this:
$http({
method: 'POST',
url: 'request-url',
data: {'message': 'Hello world'}
});
AND
write in your server part to receive data from a client (if it is php).
$data = file_get_contents("php://input");
$dataJsonDecode = json_decode($data);
$message = $dataJsonDecode->message;
echo $message; //'Hello world'
Note: $_POST will not work!
The solution works for me fine, hopefully, and for you.
Upvotes: 10
Reputation: 2023
It's not super clear above, but if you are receiving the request in PHP you can use:
$params = json_decode(file_get_contents('php://input'),true);
To access an array in PHP from an AngularJS POST.
Upvotes: 116
Reputation: 1395
I don't have the reputation to comment, but in response/addition to Don F's answer:
$params = json_decode(file_get_contents('php://input'));
A second parameter of true
needs to be added to the json_decode
function in order to properly return an associative array:
$params = json_decode(file_get_contents('php://input'), true);
Upvotes: 6