AngularJs http post does not send data

Question

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

User · Answer

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 amp param2 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

User · Answer

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

User · Answer

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      amp     key         data key                     else                       requestStr   key         data key                                                     return requestStr               httpProvider defaults headers post  Content-Type      application x-www-form-urlencoded

User · Answer

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

User · Answer

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 amp 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 lt value length    i              subValue   value i             fullSubName   name         i                  innerObj                 innerObj fullSubName    subValue            query    param innerObj      amp                            else if value instanceof Object            for subName in value              subValue   value subName             fullSubName   name         subName                  innerObj                 innerObj fullSubName    subValue            query    param innerObj      amp                            else if value     undefined  amp  amp  value     null          query    encodeURIComponent name          encodeURIComponent value      amp               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   amp  amp  String data        object File     param data    data

User · Answer

To send data via Post methode with  http of angularjs you need to change   data   message     message  with  data    param  message message

User · Answer

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    gt   1        B    gt   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    gt                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   gt     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       lt any gt  httpProvider defaults  transformRequest     function data  any            if   angular isObject data     data toString        object File    return data          return phpize data  join   amp                      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    gt   1        B    gt             a    gt                 C    gt           D    gt   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

User · Answer

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

User · Answer

I know has accepted answer  But  following might help to future readers  if the answer doesn t suit them for any reason   Angular doesn t do ajax same as jQuery  While I tried to follow the guide to modify angular  httpprovider   I encountered other problems  E g  I use codeigniter in which  this- gt input- gt is ajax request   function always failed  which was written by another programmer and used globally  so cant change  saying this was not real ajax request   To solve it  I took help of deferred promise   I tested it in Firefox  and ie9 and it worked   I have following function defined outside any of the angular code  This function makes regular jquery ajax call and returns deferred promise  I m still learning  object   function getjQueryAjax url  obj       return   ajax           type   post           url  url          cache  true          data  obj             Then I m calling it angular code using the following code  Please note that we have to update the  scope manually using  scope  apply          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                 This may not be the perfect answer  but it allowed me to use jquery ajax calls with angular and allowed me to update the  scope

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I have had a similar issue  and I wonder if this can be useful as well  https   stackoverflow com a 11443066  var xsrf     param  fkey   key      http       method   POST       url  url      data  xsrf      headers    Content-Type    application x-www-form-urlencoded        Regards

User · Answer

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  lt  value length    i

User · Answer

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   amp                        data    sample id   100  sample name   Abin John            success function data  status  headers  config            error function ata  status  headers  config

User · Answer

To build on  felipe-miosso s answer     Download it as an AngularJS module from here  Install it Add it to your application   var app   angular module  my app            httpPostFix

User · Answer

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 lt AgentRequest gt  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

User · Answer

I also faced similar problem and i was doing something like this and that didn t worked  My Spring controller was not able read data parameter   var paramsVal  data   id   1        http post  Request URL     params  paramsVal        But reading this forum and API Doc  I tried following  way and that worked for me  If some one also have similar problem  You can try below way as well    http         method   POST         url   Request URL                    params  paramsVal        headers    Content-Type    application x-www-form-urlencoded charset utf-8                     Please check https   docs angularjs org api ng service  http post  for what param config does   data   id   1        Map of strings or objects which will be turned to URL data  id 1

User · Answer

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

User · Answer

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   Adding header Serializing json    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

User · Answer

I like to use a function to convert objects to post params   myobject     one   1   two   2   three   3    Object toparams   function ObjecttoParams obj        var p           for  var key in obj            p push key         encodeURIComponent obj key               return p join   amp          http       method   POST       url  url      data  Object toparams myobject       headers    Content-Type    application x-www-form-urlencoded

User · Answer

When I had this problem the parameter I was posting turned out to be an array of objects instead of a simple object

User · Answer

Similar to the OP s suggested working format  amp  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

User · Answer

I wrote a small PHP helper function that allows both types of input parameters    function getArgs          if   input   file get contents  php   input    amp  amp   input params   json decode  input true           return  input params     POST     GET      return   POST     GET      Usage      lt  php     include  util php      above code      request   getArgs          myVar           if  isset  request  myVar              myVar    request  myVar      gt    Therefore no changes required to your JavaScript

User · Answer

I had the same problem with AngularJS and Node js   Express 4   Router  Router expects the data from post s request in body  This body was always empty if i followed the example from Angular Docs   Notation 1   http post   someUrl    msg  hello word       But if i used it in the data  Notation 2    http          withCredentials  false         method   post          url  yourUrl         headers    Content-Type    application x-www-form-urlencoded           data  postData        Edit 1   Otherwise node js router will expect the data in req body if used notation 1   req body msg   Which also sends the information as JSON payload  This is better in some cases where you have arrays in your json and x-www-form-urlencoded will give some problems   it worked  Hope it helps

User · Answer

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      I am using jQuery   param function to serialize the JSON data to www post data 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                         lt hr   gt status      status                         lt hr   gt headers      header                         lt hr   gt config      config                               Look at the code example of  http post method here

User · Answer

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

User · Answer

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

User · Answer

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   wahxxx gmail com          password   123456                headers       Content-Type    application x-www-form-urlencoded

User · Answer

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

User · Answer

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

User · Answer

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- gt message          echo  message         Hello world     Note    POST will not work   The solution works for me fine  hopefully  and for you

User · Answer

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

User · Answer

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   amp            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  amp  amp  null     value            return encodeURIComponent key          encodeURIComponent value           else           return                             function isQueryStringEligible input        return null     input  amp  amp   object      typeof input  amp  amp    object File       String input          var interceptor    function          return         request  function  config            if  0  lt     post    put    patch   indexOf config method toLowerCase     amp  amp  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    gt     parentKey    subKey        const buildObject    key  value    gt      key   value        const join    array    gt  array filter  entry    gt  entry  join   amp        const arrayToQueryString    parentKey  array    gt      join array map  value  subKey    gt        toQueryString buildObject buildKey parentKey  subKey   value         const objectToQueryString    parentKey  object    gt      join Object keys object  map  subKey    gt        toQueryString buildObject buildKey parentKey  subKey   object subKey          const toQueryString    input    gt  join Object keys input  map  key    gt        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  amp  amp  null     value          return    encodeURIComponent key     encodeURIComponent value           else         return                     const isQueryStringEligible    input    gt      null     input  amp  amp   object      typeof input  amp  amp    object File       String input      const interceptor         gt         request config          if  0  lt     post    put    patch   indexOf config method toLowerCase     amp  amp  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

[angularjs] AngularJs $http.post() does not send data

Examples related to angularjs

Examples related to post

Examples related to angular-http