How can I post data as form data instead of a request payload

Question

In the code below  the AngularJS  http method calls the URL  and submits the xsrf object as a  Request Payload   as described in the Chrome debugger network tab   The jQuery   ajax method does the same call  but submits xsrf as  Form Data    How can I make AngularJS submit xsrf as form data instead of a request payload   var url    http   somewhere com    var xsrf    fkey   xsrf key      http       method   POST       url  url      data  xsrf    success function            ajax       type   POST       url  url      data  xsrf      dataType   json       success  function

User · Answer

The continued confusion surrounding this issue inspired me to write a blog post about it. The solution I propose in this post is better than your current top rated solution because it does not restrict you to parametrizing your data object for $http service calls; i.e. with my solution you can simply continue to pass actual data objects to $http.post(), etc. and still achieve the desired result.

Also, the top rated answer relies on the inclusion of full jQuery in the page for the $.param() function, whereas my solution is jQuery agnostic, pure AngularJS ready.

http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

Hope this helps.

User · Answer

If you do not want to use jQuery in the solution you could try this  Solution nabbed from here https   stackoverflow com a 1714899 1784301   http       method   POST       url  url      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   amp                data  xsrf    success function

User · Answer

There is a really nice tutorial that goes over this and other related stuff - Submitting AJAX Forms  The AngularJS Way    Basically  you need to set the header of the POST request to indicate that you are sending form data as a URL encoded string  and set the data to be sent the same format   http     method     POST     url        url     data        param xsrf       pass in data as strings   headers      Content-Type    application x-www-form-urlencoded        set the headers so angular passing info as form data  not request payload        Note that jQuery s param   helper function is used here for serialising the data into a string  but you can do this manually as well if not using jQuery

User · Answer

You can try with below solution   http           method   POST           url  url-post          data  data-post-object-json          headers    Content-Type    application x-www-form-urlencoded            transformRequest  function obj                var str                   for  var key in obj                    if  obj key  instanceof Array                        for var idx in obj key                            var subObj   obj key  idx                           for var subKey in subObj                               str push encodeURIComponent key          idx          encodeURIComponent subKey           encodeURIComponent subObj subKey                                                                                       else                       str push encodeURIComponent key          encodeURIComponent obj key                                                 return str join   amp                      success function response                 Do something

User · Answer

In your app config -   httpProvider defaults transformRequest   function  data            if  data     undefined              return data          var clonedData     extend true      data           for  var property in clonedData              if  property substr 0  1                          delete clonedData property            return   param clonedData            With your resource request -   headers                     Content-Type    application x-www-form-urlencoded

User · Answer

var fd   new FormData        fd append  file   file        http post uploadUrl  fd            transformRequest  angular identity          headers    Content-Type   undefined              success function                error function              Please checkout  https   uncorkedstudios com blog multipartformdata-file-upload-with-angularjs

User · Answer

The following line needs to be added to the  http object that is passed  headers    Content-Type    application x-www-form-urlencoded  charset UTF-8    And the data passed should be converted to a URL-encoded string   gt    param  fkey   quot key quot     fkey key   So you have something like   http       method   POST       url  url      data    param  fkey   quot key quot         headers    Content-Type    application x-www-form-urlencoded  charset UTF-8       From  https   groups google com forum   msg angular 5nAedJ1LyO0 4Vj 72EZcDsJ UPDATE To use new services added with AngularJS V1 4  see  URL-encoding variables using only AngularJS services

User · Answer

I m currently using the following solution I found in the AngularJS google group     http  post   echo json     json     encodeURIComponent angular toJson data          headers             Content-Type    application x-www-form-urlencoded  charset UTF-8           success function data         scope data   data        Note that if you re using PHP  you ll need to use something like Symfony 2 HTTP component s Request  createFromGlobals   to read this  as   POST won t automatically loaded with it

User · Answer

These answers look like insane overkill  sometimes  simple is just better    http post loginUrl   userName     encodeURIComponent email                           amp password     encodeURIComponent password                           amp grant type password    success function  data

User · Answer

Create an adapter service for post   services service  Http   function   http         var self   this      this post   function  url  data            return  http               method   POST               url  url              data    param data               headers    Content-Type    application x-www-form-urlencoded                           Use it in your controllers or whatever   ctrls controller  PersonCtrl   function  Http    our service           var self   this     self user    name   Ozgur   eMail  null       self register   function              Http post   user register   self user  then function  r                  response             console log r

User · Answer

This isn t a direct answer  but rather a slightly different design direction   Do not post the data as a form  but as a JSON object to be directly mapped to server-side object  or use REST style path variable  Now I know neither option might be suitable in your case since you re trying to pass a XSRF key  Mapping it into a path variable like this is a terrible design   http   www someexample com xsrf  xsrfKey    Because by nature you would want to pass xsrf key to other path too   login   book-appointment etc  and you don t want to mess your pretty URL  Interestingly adding it as an object field isn t appropriate either  because now on each of json object you pass to server you have to add the field      appointmentId   23    name    Joe Citizen     xsrf             You certainly don t want to add another field on your server-side class which does not have a direct semantic association with the domain object   In my opinion the best way to pass your xsrf key is via a HTTP header  Many xsrf protection server-side web framework library support this  For example in Java Spring  you can pass it using X-CSRF-TOKEN header   Angular s excellent capability of binding JS object to UI object means we can get rid of the practice of posting form all together  and post JSON instead  JSON can be easily de-serialized into server-side object and support complex data structures such as map  arrays  nested objects  etc   How do you post array in a form payload  Maybe like this   shopLocation downtown amp daysOpen Monday amp daysOpen Tuesday amp daysOpen Wednesday   or this   shopLocation downtwon amp daysOpen Monday Tuesday Wednesday   Both are poor design

User · Answer

Just set Content-Type is not enough  url encode form data before send   http post url  jQuery param data

User · Answer

For Symfony2 users   If you don t want to change anything in your javascript for this to work you can do these modifications in you symfony app   Create a class that extends Symfony Component HttpFoundation Request class    lt  php  namespace Acme Test MyRequest   use Symfony Component HttpFoundation Request  use Symfony Component HttpFoundation ParameterBag   class MyRequest extends Request          Override and extend the createFromGlobals function             return Request A new request      api    public static function createFromGlobals          Get what we would get from the parent    request   parent  createFromGlobals          Add the handling for  application json  content type    if 0     strpos  request- gt headers- gt get  CONTENT TYPE     application json             The json is in the content      cont    request- gt getContent          json   json decode  cont           ParameterBag must be an Array      if is object  json            json    array   json         request- gt request   new ParameterBag  json       return  request          Now use you class in app dev php  or any index file that you use      web app dev php   kernel   new AppKernel  dev   true       kernel- gt loadClassCache     request   ForumBundleRequest  createFromGlobals        use your class instead     request   Request  createFromGlobals     response    kernel- gt handle  request    response- gt send     kernel- gt terminate  request   response

User · Answer

AngularJS is doing it right as it doing the following content-type inside the http-request header   Content-Type  application json   If you are going with php like me  or even with Symfony2 you can simply extend your server compatibility for the json standard like described here  http   silex sensiolabs org doc cookbook json request body html  The Symfony2 way  e g  inside your DefaultController     request    this- gt getRequest    if  0     strpos  request- gt headers- gt get  Content-Type     application json           data   json decode  request- gt getContent    true        request- gt request- gt replace is array  data     data   array       var dump  request- gt request- gt all       The advantage would be  that you dont need to use jQuery param and you could use AngularJS its native way of doing such requests

User · Answer

As a workaround you can simply make the code receiving the POST respond to application json data   For PHP I added the code below  allowing me to POST to it in either form-encoded or JSON     handles JSON posted arguments and stuffs them into   POST   angular s  http makes JSON posts  not normal  form encoded    content type args   explode        SERVER  CONTENT TYPE       parse content type string if   content type args 0      application json       POST   json decode file get contents  php   input   true      now continue to reference   POST vars as usual

User · Answer

Complete answer  since angular 1 4   You need to include de dependency  httpParamSerializer  var res    resource serverUrl    Token                          save    method   POST   headers     Content-Type    application x-www-form-urlencoded                                   res save       httpParamSerializer   param1   sdsd   param2   sdsd      function  response                    function  error

User · Answer

I took a few of the other answers and made something a bit cleaner  put this  config   call on the end of your angular module in your app js    config    httpProvider   function   httpProvider         Intercept POST requests  convert to standard form encoding    httpProvider defaults headers post  Content-Type      application x-www-form-urlencoded      httpProvider defaults transformRequest unshift function  data  headersGetter        var key  result            if  typeof data      string         return data       for  key in data          if  data hasOwnProperty key           result push encodeURIComponent key          encodeURIComponent data key               return result join   amp

User · Answer

As of AngularJS v1 4 0  there is a built-in  httpParamSerializer service that converts any object to a part of a HTTP request according to the rules that are listed on the docs page   It can be used like this    http post  http   example com    httpParamSerializer formDataObj        success function data     response status 200-299           error function data     response status 400-999         Remember that for a correct form post  the Content-Type header must be changed  To do this globally for all POST requests  this code  taken from Albireo s half-answer  can be used    http defaults headers post  Content-Type      application x-www-form-urlencoded     To do this only for the current post  the headers property of the request-object needs to be modified   var req      method   POST    url   http   example com    headers        Content-Type    application x-www-form-urlencoded       data   httpParamSerializer formDataObj       http req

User · Answer

This is what I am doing for my need  Where I need to send the login data to API as form data and the Javascript Object userData  is getting converted automatically to URL encoded data          var deferred    q defer             http               method   POST               url  apiserver     authenticate               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   amp                                data  userData            success function  response                  logics             deferred resolve response              error function  err  status               deferred reject err                 This how my Userdata is  var userData                     grant type   password                   username  loginData userName                  password  loginData password

User · Answer

You can define the behavior globally    http defaults headers post  Content-Type      application x-www-form-urlencoded     So you don t have to redefine it every time    http post   handle post         foo   FOO       bar   BAR     success function  data  status  headers  config           TODO    error function  data  status  headers  config           TODO

User · Answer

Use AngularJS  http service and use its post method or configure  http function

User · Answer

The only thin you have to change is to use property  params  rather than  data  when you create your  http object    http      method   POST      url  serviceUrl     ClientUpdate      params    LangUserId  userId  clientJSON  clients i          In the example above clients i  is just JSON object  not serialized in any way   If you use  params  rather than  data  angular will serialize the object for you using  httpParamSerializer  https   docs angularjs org api ng service  httpParamSerializer

[ajax] How can I post data as form data instead of a request payload?

Examples related to ajax

Examples related to angularjs

Examples related to post

Examples related to angular-http