Pure JavaScript Send POST Data Without a Form

Question

Is there a way to send data using the POST method without a form and without refreshing the page using only pure JavaScript  not jQuery   post     Maybe httprequest or something else  just can t find it now

User · Answer

You can use the XMLHttpRequest object as follows   xhr open  POST   url  true   xhr setRequestHeader  Content-Type    application x-www-form-urlencoded  charset UTF-8    xhr send someStuff     That code would post someStuff to url  Just make sure that when you create your XMLHttpRequest object  it will be cross-browser compatible  There are endless examples out there of how to do that

User · Answer

The  new-ish at the time of writing in 2017  Fetch API is intended to make GET requests easy  but it is able to POST as well   let data    element   barium     fetch   post data here       method   POST      body  JSON stringify data     then res   gt      console log  Request complete  response    res         If you are as lazy as me  or just prefer a shortcut helper    window post   function url  data      return fetch url   method   POST   body  JSON stringify data                post  post data here    element   osmium

User · Answer

There is an easy method to wrap your data and send it to server as if you were sending an HTML form using POST  you can do that using FormData object as following   data   new FormData   data set  Foo  1  data set  Bar   boo    let request   new XMLHttpRequest    request open  POST    some url    true   request send data    now you can handle the data on the server-side just like the way you deal with reugular HTML Forms   Additional Info  It is advised that you must not set Content-Type header when sending FormData since the browser will take care of that

User · Answer

You can send it and insert the data to the body   var xhr   new XMLHttpRequest    xhr open  POST   yourUrl  true   xhr setRequestHeader  Content-Type    application json    xhr send JSON stringify       value  value        By the way  for get request   var xhr   new XMLHttpRequest       we defined the xhr  xhr onreadystatechange   function          if  this readyState    4  return       if  this status    200            var data   JSON parse this responseText               we get the returned data               end of state change  it can be after some time  async      xhr open  GET   yourUrl  true   xhr send

User · Answer

navigator sendBeacon    If you simply need to POST data and do not require a response from the server  the shortest solution would be to use navigator sendBeacon     const data   JSON stringify     example 1  123    example 2   Hello  world         navigator sendBeacon  example php   data

User · Answer

Also  RESTful lets you get data back from a POST request   JS  put in static hello html to serve via Python     lt html gt  lt head gt  lt meta charset  utf-8   gt  lt  head gt  lt body gt  Hello    lt script gt   var xhr   new XMLHttpRequest    xhr open  POST     postman   true   xhr setRequestHeader  Content-Type    application json    xhr send JSON stringify       value   value       xhr onload   function       console log  HELLO     console log this responseText     var data   JSON parse this responseText     console log data       lt  script gt  lt  body gt  lt  html gt    Python server  for testing    import time  threading  socket  SocketServer  BaseHTTPServer import os  traceback  sys  json   log lock             threading Lock   log next thread id   0    Local log functiondef   def Log module  msg       with log lock          thread   threading current thread     name           msg        s  s   s     module  thread  msg          sys stderr write msg     n    def Log Traceback        t     traceback format exc   strip   n   split   n       if    in   in t -3           t -3    t -3  replace    in    n    n     In                      t -2       n         err     n       join t -3    replace         replace   File            err   err replace    line           Log  Traceback     n  join t  -3       n n n    n        err     n    n n        os  exit 4   def Set Thread Label s       global log next thread id     with log lock          threading current thread     name       d s                   log next thread id  s          log next thread id    1   class Handler BaseHTTPServer BaseHTTPRequestHandler        def do GET self           Set Thread Label self path     get            try              Log  HTTP    PATH   s     self path              with open  static    self path  as f                  data   f read               Log  Static    DATA   s     data              self send response 200              self send header  Content-type    text html               self end headers               self wfile write data          except              Log Traceback        def do POST self           Set Thread Label self path     post            try              length   int self headers getheader  content-length                req     self rfile read length              Log  HTTP    PATH   s     self path              Log  URL    request data    s    req              req   json loads req              response     req   req              response   json dumps response              Log  URL    response data    s    response              self send response 200              self send header  Content-type    application json               self send header  content-length   str len response                self end headers               self wfile write response          except              Log Traceback       Create ONE socket  addr        8000  sock   socket socket  socket AF INET  socket SOCK STREAM  sock setsockopt socket SOL SOCKET  socket SO REUSEADDR  1  sock bind addr  sock listen 5     Launch 100 listener threads  class Thread threading Thread       def   init   self  i           threading Thread   init   self          self i   i         self daemon   True         self start       def run self           httpd   BaseHTTPServer HTTPServer addr  Handler  False             Prevent the HTTP server from re-binding every handler            https   stackoverflow com questions 46210672          httpd socket   sock         httpd server bind   self server close   lambda self  None          httpd serve forever    Thread i  for i in range 10   time sleep 9e9    Console log  chrome    HELLO hello html 14   req     value    value    hello html 16   req         req    value   value     proto     Object   Console log  firefox    GET  http   XXXXX 8000 hello html  HTTP 1 0 200 OK 0ms  POST  XHR  http   XXXXX 8000 postman  HTTP 1 0 200 OK 0ms  HELLO hello html 13 3   req     value    value    hello html 14 3 Object   req  Object     Console log  Edge    HTML1300  Navigation occurred  hello html HTML1527  DOCTYPE expected  Consider adding a valid HTML5 doctype    lt  DOCTYPE html gt    hello html  1 1  Current window  XXXXX hello html HELLO hello html  13 3    req     value    value    hello html  14 3   object Object  hello html  16 3              functions             proto               req              functions                proto                  value   value                 Python log   HTTP 8 postman post   PATH   postman  URL 8 postman post   request data     value   value   URL 8 postman post   response data     req     value    value

User · Answer

Did you know that JavaScript has it s built-in methods and libs to create forms and submit them    I am seeing a lot of replies here all asking to use a 3rd party library which I think is an overkill    I would do the following in pure Javascript    lt script gt  function launchMyForm        var myForm   document createElement  FORM       myForm setAttribute  id   TestForm       document body appendChild myForm       this will create a new FORM which is mapped to the Java Object of myForm  with an id of TestForm  Equivalent to   lt form id  TestForm  gt  lt  form gt      var myInput   document createElement  INPUT       myInput setAttribute  id   MyInput       myInput setAttribute  type   text       myInput setAttribute  value   Heider       document getElementById  TestForm   appendChild myInput       This will create an INPUT equivalent to   lt INPUT id  MyInput  type  text  value  Heider    gt  and then assign it to be inside the TestForm tags      lt  script gt    This way  A  you don t need to rely on 3rd parties to do the job   B  It s all built-in to all browsers   C  faster   D  it works  feel free to try it out    I hope this helps   H

User · Answer

You can use XMLHttpRequest  fetch API      If you want to use XMLHttpRequest you can do the following  var xhr   new XMLHttpRequest    xhr open  POST   url  true   xhr setRequestHeader  Content-Type    application json    xhr send JSON stringify       name   Deska       email   deska gmail com       phone   342234553        xhr onload   function         var data   JSON parse this responseText       console log data        Or if you want to use fetch API   fetch url        method  POST       body  JSON stringify           name   Deska           email   deska gmail com           phone   342234553                         then result   gt               do something with the result         console log  Completed with result    result

User · Answer

const data     username   example      fetch  https   example com profile       method   POST      or  PUT    headers                 Content-Type    application json                   body  JSON stringify data         then response   gt  response json       then data   gt          console log  Success    data             catch  error    gt             console error  Error    error

[javascript] Pure JavaScript Send POST Data Without a Form

Examples related to javascript

Examples related to post

Examples related to httpwebrequest

Examples related to xmlhttprequest

Examples related to http-post