send ajax post request javascript code example

Example 1: jquery ajax post example

var formData = {name:"John", surname:"Doe", age:"31"}; //Array 

$.ajax({
    url : "https://example.com/rest/getData", // Url of backend (can be python, php, etc..)
    type: "POST", // data type (can be get, post, put, delete)
    data : formData, // data in json format
  	async : false, // enable or disable async (optional, but suggested as false if you need to populate data afterwards)
    success: function(response, textStatus, jqXHR) {
    	console.log(response);
    },
    error: function (jqXHR, textStatus, errorThrown) {
		console.log(jqXHR);
      	console.log(textStatus);
      	console.log(errorThrown);
    }
});

Example 2: ajax data post call in javascript

$.ajax({
   url: 'ajaxfile.php',
   type: 'post',
   data: {name:'yogesh',salary: 35000,email: '[email protected]'},
   success: function(response){

   }
});

Example 3: javascript send post data with ajax

function makeRequest (method, url, data) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if(method=="POST" && data){
        xhr.send(data);
    }else{
        xhr.send();
    }
  });
}

//POST example
var data={"person":"john","balance":1.23};
makeRequest('POST', "https://www.codegrepper.com/endpoint.php?param1=yoyoma",data).then(function(data){
              var results=JSON.parse(data);
});

Example 4: javascript ajax request

function makeRequest (method, url, data) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if(method=="POST" && data){
        xhr.send(data);
    }else{
        xhr.send();
    }
  });
}

//GET example
makeRequest('GET', "https://www.codegrepper.com/endpoint.php?param1=yoyoma").then(function(data){
              var results=JSON.parse(data);
});
//POST example
var data={"person":"john","balance":1.23};
makeRequest('POST', "https://www.codegrepper.com/endpoint.php?param1=yoyoma",data).then(function(data){
              var results=JSON.parse(data);
});

Example 5: ajax open a request

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  
  //looking for a change or state , like a request or get.
  xhttp.onreadystatechange = function() {
     
     //if equal to 4 means that its ready.
    // if equal to 200 indicates that the request has succeeded.
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  
  //GET method for gettin the data // the file you are requesting
  xhttp.open("GET", "TheFileYouWant.html", true);
  
  //sending the request
  xhttp.send();
}