Pure JavaScript Send Post Data Without a Form

Ajax POST request without an html form and in pure JS

You can find some answers here, about how to make Vanilla JS Ajax call:
http://www.sitepoint.com/guide-vanilla-ajax-without-jquery

About to send without forms, you already have the response here:
Send POST data using XMLHttpRequest

You can get your params server-side(php) with the global variables $_GET["your_param_name"] and $_POST["your_param_name"], they are arrays so I think you know how to use them.

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Send POST data using XMLHttpRequest

The code below demonstrates on how to do this.

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&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 && 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 = "", urlEncodedDataPairs = [], name;
for( name in params ) {
 urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}

How to do a POST request from a browser extension to localhost WITHOUT JQUERY?

What you're doing there (sending URL-encoded data within a JSON object) makes no sense. You're mixing two different data formats arbitrarily. You also haven't set the content-type header, which is needed, otherwise it defaults to plain-text/HTML and the server won't populate it into the $_POST variables.

This version will work:

function log(info,time){
    if(time===undefined)time=true;
    var xhttp=new XMLHttpRequest();
    xhttp.onreadystatechange=function(){
        if(this.readyState===4&&this.status===200){
            console.log(this.responseText);
        }
    }
    info="log_item="+encodeURIComponent(info)+"&time="+(time?"true":"false");
    
    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //set content type
    xhttp.open("POST","http://localhost/log.php",true);
    xhttp.send(info); //just send the URL-encoded data without wrapping it in JSON
}

P.S. $_POST["log_item"]=urldecode($_POST["log_item"]); is redundant in the PHP - the data will be decoded automatically already.

---

Related Topics