I'm not able to POST data using JavaScript Ajax

Question

I'm able to get the data from the filltext web api using Ajax GET request,but when i use Post request then i can't see anything returned to the console and also no errors, how do i solve this?

const xhr = new XMLHttpRequest();
const url = 'http://www.filltext.com/?rows=1&pretty=true&id={index}&fname={sahil}&lname={keshav}&company={business}';

let test = JSON.stringify({
    id:124,
    fname:'sunil',
    lname:'singh',
    company:'reebok'
}); 

function getData(){ 
    xhr.onreadystatechange = () => {
        if(this.readyState === 4 && this.status === 200){
            let tes = JSON.parse(this.responseText)
            console.log(tes);
        }
    }
    xhr.open('POST',url,true);
    xhr.setRequestHeader('Content-type','application/json');
    xhr.send(test);
}

Answer 1

Make sure to console log all the information that will help you debug the request, and add an error handling function as well.

Also, the Developer Console is your friend. Check the browser's console and the Networks Tab (Chrome) to figure out what's going on. Make sure to check the XHR option in the Network's Tab to display only the XMLHttpRequest network requests.

Here's a StackOverflow post that can help you in that direction.

const xhr = new XMLHttpRequest();
const url = 'http://www.filltext.com/?rows=1&pretty=true&id={index}&fname={sahil}&lname={keshav}&company={business}';

let test = JSON.stringify({
           id:124,
           fname:'sunil',
           lname:'singh',
           company:'reebok'
}); 
    function getData(){ 
       xhr.onreadystatechange = () => {
           console.log( "onReadyStateChange:", xhr.readyState, xhr.status, xhr.statusText);
           if(this.readyState === 4 && this.status === 200){
               let tes = JSON.parse(this.responseText)
                 console.log(tes);
          }
      }
       xhr.open('POST',url,true);
       xhr.setRequestHeader('Content-type','application/json');
       xhr.send(test);
       // Add error handling:
       xhr.onerror = function(){
           console.log( "onError:", xhr.status, xhr.statusText);
           // Triggers when request couldn't be completed
       }
     }

Answer 2

Since you're making a POST request here, you probably need to check the status between 200 to 400 . (I'm including 400 since after this typically codes for bad requests start)

this.status >= 200 && this.status < 400

Here are the links:

MDN- POST status

MDN-statuses

201 Created The request has succeeded and a new resource has been created as a result. This is typically the response sent after POST requests, or some PUT requests.

Further clarifications: Typical status code for a successful POST request is 201. This is NOT to say that you can't send a 200 code for POST request. But that doesn't happen usually and I believed that's where the mistake in the code could be.