angularjs how to post key/values not json object

Question

I hava a json object in my ctl:

$scope.disease

and anyone can edit it's properties and then post to server.

when save it,

$scope.save = function(){
    $http.post('/***', $scope.disease)
}

however, the request body is as a json string. while I want it to be as form data:

key1: value1
key2: value2
key3: value3

how can I do?

thanks a lot

after I set the Content-Type like this:

.config(['$httpProvider', function($httpProvider){
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
}])

the request header:

Accept  application/json, text/plain, */*
Accept-Encoding     gzip, deflate
Accept-Language     en-US,en;q=0.5
Content-Type   application/x-www-form-urlencoded; charset=UTF-8
User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:38.0) Gecko/20100101 Firefox/38.0

however the post parameter like this:

{"age":56,"birthday":"1958-07-14","familyHistory":"********************","id":1,"illness":"*********************","illnessHistory":"***************************","number":"21","selfDescription":"***********************"}

Because the $scope.disease is:

{
    "age": 56,
    "birthday": "1958-07-14",
    "familyHistory": "********************",
    "id": 1,
    "illness": "*********************",
    "illnessHistory": "***************************",
    "number": "21",
    "selfDescription": "***********************"
}

while the post parameter should like this:

"age": 56,
"birthday": "1958-07-14",
"familyHistory": "********************",
"id": 1,
"illness": "*********************",
"illnessHistory": "***************************",
"number": "21",
"selfDescription": "***********************"

Do you understand me?

Finally I add a transformRequest method to post-request:

$httpProvider.defaults.transformRequest=function(obj){
var str =[];
for(var p in obj){
str.push(encodeURICompent(p)+'='+encodeURICompent(obj[p]));
}
return str.join('&');
}

Then the problem solved!

Oh, my absolutely require though I can parse it at my server-side, I don't think I should parse it at server-side — Billy Yang
– Billy Yang, Commented Jul 1, 2015 at 8:48
If this can't be resolved,I will try to fetch keys from $scope.disease manually — Billy Yang
– Billy Yang, Commented Jul 1, 2015 at 8:54

vvondra · Accepted Answer · 2015-06-30 11:20:46Z

1

In the $http.post call, add a correct Content-Type header to the config object (third parameter). If left empty, Angular defaults to a JSON payload.

headers : { 'Content-Type': 'application/x-www-form-urlencoded' }

answered Jun 30, 2015 at 11:20

vvondra

3,1622 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raulucco · Accepted Answer · 2015-06-30 11:20:54Z

0

Set the Content-Type attribute of the header to application/x-www-form-urlencoded using the $httpProvider on your config or do it for each request on the $http service.

answered Jun 30, 2015 at 11:20

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Comments

road2victory · Accepted Answer · 2015-06-30 11:25:22Z

You can do it in below mentioned ways

     this.createOrder = function(userId,accountId,deliveryDate,cutOffDateTime,customerRef){       
          var orderCreateURL = contextProp.baseURL + '/users/'+userId+'/account/orders';       
          return $http({
                  method: 'POST',
                  url: orderCreateURL,
                  data:{
                      'accountId': accountId,
                      'deliveryDate':deliveryDate,
                      'cutOffDateTime':cutOffDateTime,
                      'customerRef':customerRef
                   }
         });
    };

It will post your data in key,value pairs. You can also specify the headers i.e. headers: {'Content-Type': undefined } and transformRequest: angular.identity etc.. in parameters same as any other HTTP requests. Thanks.

Collectives™ on Stack Overflow

angularjs how to post key/values not json object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related