Send POST data using XMLHttpRequest

Question

I d like to send some data using an XMLHttpRequest in JavaScript  Say I have the following form in HTML   lt form name  quot inputform quot  action  quot somewhere quot  method  quot post quot  gt     lt input type  quot hidden quot  value  quot person quot  name  quot user quot  gt     lt input type  quot hidden quot  value  quot password quot  name  quot pwd quot  gt     lt input type  quot hidden quot  value  quot place quot  name  quot organization quot  gt     lt input type  quot hidden quot  value  quot key quot  name  quot requiredkey quot  gt   lt  form gt   How can I write the equivalent using an XMLHttpRequest in JavaScript

User · Answer

var util         getAttribute  function  dom  attr            if  dom getAttribute     undefined                return dom getAttribute attr             else if  dom attr      undefined                return dom attr             else               return null                       addEvent  function  obj  evtName  func              Primero revisar attributos si existe o no          if  obj addEventListener                obj addEventListener evtName  func  false              else if  obj attachEvent                obj attachEvent evtName  func             else               if  this getAttribute  on    evtName      undefined                    obj  on    evtName    func                else                   obj evtName    func                                       removeEvent  function  obj  evtName  func            if  obj removeEventListener                obj removeEventListener evtName  func  false             else if  obj detachEvent                obj detachEvent evtName  func             else               if  this getAttribute  on    evtName      undefined                    obj  on    evtName    null                else                   obj evtName    null                                      getAjaxObject  function              var xhttp   null            XDomainRequest         if   XMLHttpRequest  in window                xhttp   new XMLHttpRequest              else                  code for IE6  IE5             xhttp   new ActiveXObject  Microsoft XMLHTTP                      return xhttp               START CODE HERE   var xhr   util getAjaxObject     var isUpload    xhr  amp  amp    upload  in xhr   amp  amp    onprogress  in xhr upload     if  isUpload        util addEvent xhr   progress   xhrEvt onProgress         util addEvent xhr   loadstart   xhrEvt onLoadStart       util addEvent xhr   abort   xhrEvt onAbort      util addEvent xhr   readystatechange   xhrEvt ajaxOnReadyState    var xhrEvt         onProgress  function  e            if  e lengthComputable                  Loaded bytes              var cLoaded   e loaded                       onLoadStart  function                 onAbort  function                 onReadyState  function              var state   xhr readyState          var httpStatus   xhr status           if  state     4  amp  amp  httpStatus     200                  Completed success              var data   xhr responseText                        CONTINUE YOUR CODE HERE  xhr open  POST    mypage php   true   xhr setRequestHeader  Content-type    application x-www-form-urlencoded      if   FormData  in window        var formData   new FormData        formData append  user    aaaaa        formData append  pass    bbbbb         xhr send formData      else        xhr send   user aaaaa amp pass bbbbb

User · Answer

Here is a complete solution with application-json     Input values will be grabbed by ID  lt input id  quot loginEmail quot  type  quot text quot  name  quot email quot  placeholder  quot Email quot  gt   lt input id  quot loginPassword quot  type  quot password quot  name  quot password quot  placeholder  quot Password quot  gt      return stops normal action and runs login    lt button onclick  quot return login   quot  gt Submit lt  button gt    lt script gt      function login                Form fields  see IDs above         const params                 email  document querySelector   loginEmail   value              password  document querySelector   loginPassword   value                    const http   new XMLHttpRequest           http open  POST     login           http setRequestHeader  Content-type    application json           http send JSON stringify params      Make sure to stringify         http onload   function                    Do whatever with response             alert http responseText                   lt  script gt   Ensure that your Backend API can parse JSON  For example  in Express JS  import bodyParser from  body-parser  app use bodyParser json

User · Answer

Minimal use of FormData to submit an AJAX request   lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta http-equiv  X-UA-Compatible  content  IE Edge  chrome 1   gt   lt script gt   use strict   function submitForm oFormElement      var xhr   new XMLHttpRequest      xhr onload   function    alert  xhr responseText        success case   xhr onerror   function    alert  xhr responseText        failure case   xhr open  oFormElement method  oFormElement action  true     xhr send  new FormData  oFormElement      return false     lt  script gt   lt  head gt    lt body gt   lt form method  post  action  somewhere  onsubmit  return submitForm this    gt     lt input type  hidden  value  person    name  user    gt     lt input type  hidden  value  password  name  pwd    gt     lt input type  hidden  value  place     name  organization    gt     lt input type  hidden  value  key       name  requiredkey    gt     lt input type  submit  value  post request   gt   lt  form gt   lt  body gt   lt  html gt    Remarks   This does not fully answer the OP question because it requires the user to click in order to submit the request  But this may be useful to people searching for this kind of simple solution    This example is very simple and does not support the GET method  If you are interesting by  more sophisticated examples  please have a look at the excellent MDN documentation  See also similar answer about XMLHttpRequest to Post HTML Form  Limitation of this solution  As pointed out by Justin Blank and Thomas Munk  see their comments   FormData is not supported by IE9 and lower  and default browser on Android 2 3

User · Answer

Try to use json object instead of formdata  below is the code working for me  formdata doesnot work for me either  hence I came up with this solution   var jdata   new Object    jdata level   levelVal     level is key and levelVal is value var xhttp   new XMLHttpRequest    xhttp open  POST    http   MyURL   true   xhttp setRequestHeader  Content-Type    application json    xhttp send JSON stringify jdata     xhttp onreadystatechange   function         if  this readyState    4  amp  amp  this status    200          console log this responseText

User · Answer

The code below demonstrates on how to do this  var http   new XMLHttpRequest    var url    get data php   var params    orem ipsum amp name binny   http open  POST   url  true      Send the proper header information along with the request http setRequestHeader  Content-type    application x-www-form-urlencoded     http onreadystatechange   function      Call a function when the state changes      if http readyState    4  amp  amp  http status    200            alert http responseText           http send params    In case you have create an object you can turn it into params using the following code  i e  var params   new Object    params myparam1   myval1  params myparam2   myval2      Turn the data object into an array of URL-encoded key value pairs  let urlEncodedData    quot  quot   urlEncodedDataPairs       name  for  name in params      urlEncodedDataPairs push encodeURIComponent name      encodeURIComponent params name

User · Answer

There s some duplicates that touch on this  and nobody really expounds on it  I ll borrow the accepted answer example to illustrate  http open  POST   url  true   http send  lorem ipsum amp name binny      I oversimplified this  I use http onload function       instead of that answer s older methodology  for the sake of illustration  If you use this as-is  you ll find your server is probably interpreting the POST body as a string and not actual key value parameters  i e  PHP won t show any   POST variables   You must pass the form header in to get that  and do that before http send    http setRequestHeader  Content-type    application x-www-form-urlencoded      If you re using JSON and not URL-encoded data  pass application json instead

User · Answer

Use modern JavaScript  I d suggest looking into fetch  It is the ES5 equivalent and uses Promises  It is much more readable and easily customizable   x000D   x000D  const url    http   example com   fetch url        method    POST       body  new FormData document getElementById  inputform            -- or --        body   JSON stringify              user   document getElementById  user   value                              then      response   gt  response text       json    etc         same as function response   return response text       then      html   gt  console log html     x000D   x000D   x000D   In Node js  you ll need to import fetch using  const fetch   require  quot node-fetch quot     If you want to use it synchronously  doesn t work in top scope   const json   await fetch url  optionalOptions     then response   gt  response json        text    etc     catch  e    gt        More Info  Mozilla Documentation Can I Use  96  Nov 2020  David Walsh Tutorial

User · Answer

var xhr   new XMLHttpRequest    xhr open  POST    somewhere   true   xhr setRequestHeader  Content-type    application x-www-form-urlencoded    xhr onload   function             do something to response     console log this responseText      xhr send  user person amp pwd password amp organization place amp requiredkey key      Or if you can count on browser support you could use FormData   var data   new FormData    data append  user    person    data append  pwd    password    data append  organization    place    data append  requiredkey    key     var xhr   new XMLHttpRequest    xhr open  POST    somewhere   true   xhr onload   function             do something to response     console log this responseText      xhr send data

User · Answer

Just for feature readers finding this question  I found that the accepted answer works fine as long as you have a given path  but if you leave it blank it will fail in IE  Here is what I came up with    function post path  data  callback         use strict       var request   new XMLHttpRequest         if  path                   path                  request open  POST   path  true       request setRequestHeader  Content-Type    application x-www-form-urlencoded  charset UTF-8        request onload   function  d            callback d currentTarget response              request send serialize data        You can you it like so   post      orem  ipsum  name  binny   function  response        console log respone

User · Answer

This helped me as I wanted to use only xmlHttpRequest and post an object as form data   function sendData data      var XHR   new XMLHttpRequest      var FD    new FormData          Push our data into our FormData object   for name in data        FD append name  data name              Set up our request   XHR open  POST    https   example com cors php          Send our FormData object  HTTP headers are set automatically   XHR send FD       https   developer mozilla org en-US docs Learn HTML Forms Sending forms through JavaScript

User · Answer

I have faced similar problem  using the same post and and this link I have resolved my issue     var http   new XMLHttpRequest     var url    MY URL Com login aspx    var params    eid    userEmailId   amp amp pwd   userPwd   http open  POST   url  true        Send the proper header information along with the request    http setRequestHeader  Content-type    application x-www-form-urlencoded       http setRequestHeader  Content-Length   params length     all browser wont support Refused to set unsafe header  Content-Length     http setRequestHeader  Connection    close     Refused to set unsafe header  Connection       Call a function when the state   http onreadystatechange   function         if http readyState    4  amp  amp  http status    200            alert http responseText             http send params     This link has completed information

User · Answer

NO PLUGINS NEEDED   Select the below code and drag that into in BOOKMARK BAR  if you don t see it  enable from Browser Settings   then EDIT that link      javascript var my params   prompt  Enter your parameters    var1 aaaa amp var2 bbbbb    var Target LINK   prompt  Enter destination   location href   function post path  params    var xForm   document createElement  form    xForm setAttribute  method    post    xForm setAttribute  action   path   for  var key in params    if  params hasOwnProperty key     var hiddenField   document createElement  input    hiddenField setAttribute  name   key   hiddenField setAttribute  value   params key    xForm appendChild hiddenField       var xhr   new XMLHttpRequest    xhr onload   function      alert xhr responseText      xhr open xForm method  xForm action  true   xhr send new FormData xForm    return false    parsed params       my params split   amp    forEach function  item    var s   item split       k   s 0   v   s 1   parsed params k    v      post Target LINK  parsed params   void 0     That s all  Now you can visit any website  and click that button in BOOKMARK BAR      NOTE   The above method sends data using XMLHttpRequest method  so  you have to be on the same domain while triggering the script  That s why I prefer sending data with a simulated FORM SUBMITTING  which can send the code to any domain - here is code for that     javascript var my params prompt  Enter your parameters   var1 aaaa amp var2 bbbbb    var Target LINK prompt  Enter destination   location href   function post path  params      var xForm  document createElement  form      xForm setAttribute  method    post      xForm setAttribute  action   path   xForm setAttribute  target     blank      for var key in params      if params hasOwnProperty key            var hiddenField   document createElement  input         hiddenField setAttribute  name   key        hiddenField setAttribute  value   params key            xForm appendChild hiddenField               document body appendChild xForm    xForm submit        parsed params     my params split   amp    forEach function item   var s   item split       k s 0   v s 1   parsed params k    v     post Target LINK  parsed params   void 0

User · Answer

Short  amp  modern You can catch form input values using FormData and send them by fetch fetch form action   method  post   body  new FormData form       x000D   x000D  function send       let form   document forms  inputform      fetch form action   method  post   body  new FormData form       x000D   lt form name  inputform  action  somewhere  method  post  gt     lt input               value  person  name  user  gt     lt input type  hidden  value  password  name  pwd  gt     lt input               value  place  name  organization  gt     lt input type  hidden  value  key  name  requiredkey  gt   lt  form gt    lt  -- I remove type  hidden  for some inputs above only for show them -- gt  lt br gt  Look  chrome console gt network and click  lt button onclick  send    gt send lt  button gt  x000D   x000D   x000D

[javascript] Send POST data using XMLHttpRequest

Examples related to javascript

Examples related to ajax

Examples related to forms

Examples related to post

Examples related to xmlhttprequest