How do I POST urlencoded form data with http without jQuery

Question

I am new to AngularJS  and for a start  I thought to develop a new application using only AngularJS   I am trying to make an AJAX call to the server side  using  http from my Angular App   For sending the parameters  I tried the following    http       method   post       url  URL      headers    Content-Type    application x-www-form-urlencoded        data    param  username   scope userName  password   scope password      success function result       console log result         This is working  but it is using jQuery as well at   param  For removing the dependency on jQuery  I tried   data   username   scope userName  password   scope password    but this seemed to fail  Then I tried params   params   username   scope userName  password   scope password    but this also seemed to fail  Then I tried JSON stringify   data  JSON stringify  username   scope userName  password   scope password     I found these possible answers to my quest  but was unsuccessful  Am I doing something wrong  I am sure  AngularJS would provide this functionality  but how

User · Answer

The problem is the JSON string format  You can use a simple URL string in data    http       method   POST       url  url      headers    Content-Type    application x-www-form-urlencoded        data   username    scope userName   amp password    scope password    success function

User · Answer

All of these look like overkill  or don t work     just do this   http post loginUrl   username    encodeURIComponent username                              amp password    encodeURIComponent password                              amp grant type password    success function  data

User · Answer

Here is the way it should be  and please no backend changes     certainly not     if your front stack does not support application x-www-form-urlencoded  then throw it away     hopefully AngularJS does     http        method   POST        url   api endpoint        headers    Content-Type    application x-www-form-urlencoded         data   username    scope username   amp password    scope password     then function response           on success     function response           on error        Works like a charm with AngularJS 1 5  People  let give u some advice    use promises  then success  error  when dealing with  http  forget about  sucess and  error callbacks  as they are being deprecated  From the angularjs site here  You can no longer use the JSON CALLBACK string as a placeholder for specifying where the callback parameter value should go     If your data model is more complex that just a username and a password  you can still do that  as suggested above    http        method   POST        url   api endpoint        headers    Content-Type    application x-www-form-urlencoded         data  json formatted data       transformRequest  function data  headers              return transform json to urlcoded data      iterate over fields and chain key value separated with  amp   using encodeURIComponent javascript function           then function response         on succes    function response         on error       Document for the encodeURIComponent can be found here

User · Answer

I think you need to do is to transform your data from object not to JSON string  but to url params  From Ben Nadel s blog   By default  the  http service will transform the outgoing request by serializing the data as JSON and then posting it with the content- type   quot application json quot   When we want to post the value as a FORM post  we need to change the serialization algorithm and post the data with the content-type   quot application x-www-form-urlencoded quot    Example from here   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     quot   quot    encodeURIComponent obj p             return str join  quot  amp  quot               data   username   scope userName  password   scope password     then function          UPDATE To use new services added with AngularJS V1 4  see  URL-encoding variables using only AngularJS services

User · Answer

you need to post plain javascript object  nothing else             var request    http                   method   post                   url   process cfm                   transformRequest  transformRequestAsFormPost                  data    id  4  name   Kim                                 request success                  function  data                          scope localData   data                                     if you have php as back-end then you will need to do some more modification   checkout this link for fixing php server side

User · Answer

URL-encoding variables using only AngularJS services  With AngularJS 1 4 and up  two services can handle the process of url-encoding data for POST requests  eliminating the need to manipulate the data with transformRequest or using external dependencies like jQuery     httpParamSerializerJQLike - a serializer inspired by jQuery s  param    recommended   httpParamSerializer - a serializer used by Angular itself for GET requests   Example usage   http     url   some api endpoint     method   POST     data   httpParamSerializerJQLike  scope appForm data      Make sure to inject the service you choose to the controller   headers         Content-Type    application x-www-form-urlencoded     Note the appropriate header        then function response       do something here          See a more verbose Plunker demo    How are  httpParamSerializerJQLike and  httpParamSerializer different  In general  it seems  httpParamSerializer uses less  traditional  url-encoding format than  httpParamSerializerJQLike when it comes to complex data structures   For example  ignoring percent encoding of brackets     bull  Encoding an array   sites   google    Facebook       Object with array property  sites   google amp sites   facebook    Result with  httpParamSerializerJQLike  sites google amp sites facebook    Result with  httpParamSerializer    bull  Encoding an object   address   city   LA   country   USA       Object with object property  address city  LA amp address country  USA    Result with  httpParamSerializerJQLike  address   city    LA   country   USA      Result with  httpParamSerializer

User · Answer

http        method   POST       url    server php       headers     Content-Type    application x-www-form-urlencoded         data   name        amp age  28         success function data  status        console log data       console log status

User · Answer

This worked for me  I use angular for front-end and laravel php for back-end  In my project  angular web sends json data to laravel back-end   This is my angular controller   var angularJsApp  angular module  angularJsApp       angularJsApp controller  MainCtrl   function   scope   http          scope userName   Victoria        scope password   password            http               method   POST               url  http   api mywebsite com localhost httpTest callback JSON CALLBACK               data    username     scope userName   password   scope password               headers    Content-Type    application json              success function  data  status  headers  config                console log  status  status               console log  data  status               console log  headers  status                      This is my php back-end laravel controller   public function httpTest            if  Input  has  username                   user  Input  all                return  Response  json  user - gt setCallback Input  get  callback                       This is my laravel routing  Route  post  httpTest   HttpTestController httpTest      The result in browser is     status 200   data JSON CALLBACK   username   Victoria   password   password   callback   JSON CALLBACK       httpTesting js 18 headers function  c  a   a sc b   return   c a K c    null a    There is chrome extension called postman  You can use to test your back-end url whether it is working or not  https   chrome google com webstore detail postman-rest-client fdmmgilgnpjigdojojpjoooidkmcomcm hl en  hopefully  my answer will help you

User · Answer

Though a late answer  I found angular UrlSearchParams worked very well for me  it takes care of the encoding of parameters as well    let params   new URLSearchParams    params set  abc    def     let headers   new Headers    Content-Type    application x-www-form-urlencoded     let options   new RequestOptions   headers  headers  withCredentials  true     this http  post UrlUtil getOptionSubmitUrl parentSubcatId   params  options   catch

User · Answer

If it is a form try changing the header to   headers   Content-type       application x-www-form-urlencoded  charset utf-8     and if it is not a form and a simple json then try this header   headers   Content-type       application json

User · Answer

From the  http docs  this should work         http post url  data  headers    Content-Type    application x-www-form-urlencoded          success function response                your code

[javascript] How do I POST urlencoded form data with $http without jQuery?

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to ajax

Examples related to angularjs-http