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);
}

Why do you want to do a `POST` request? FillText.com seems to provide only an endpoint for `GET`. — Amar Syla, Jun 02 '20 at 11:25
So we can't update the value and get it back on our console? but manually we can. — sahil, Jun 02 '20 at 13:42
@sahil did you try btw with status code in a range between 200-400? — ABGR, Jun 02 '20 at 14:05
@RahulDwivedi i'm just new to this request concept , i'm trying since 3 days but i cannot proceed further please if you have any resource to share so i can study from it . — sahil, Jun 02 '20 at 15:11
Just replace your condition to this `if(this.readyState === 4 && (this.status >= 200 && this.status < 400))` and try once as I said in the answer — ABGR, Jun 02 '20 at 15:14
@RahulDwivedi after using the code provided by you the code is working , but i'm unable to add those properties in the object.When i go to the Network tab and under preview it's just showing an empty array. — sahil, Jun 02 '20 at 15:22
It says you must have 20 reputation to chat , can you give me your whats app number if possible please i'm really frustated with this thing , you might be a help to me please. — sahil, Jun 02 '20 at 15:28
@sahil As much as I'd like to help, that's not how SO works. Even if I provide you the number, somebody would flag it and it'd be removed :) — ABGR, Jun 02 '20 at 17:27

Kostas Minaidis · Answer 1 · 2020-06-02T20:52:55.177

0

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
       }
     }

edited Jun 02 '20 at 20:52

answered Jun 02 '20 at 11:26

Kostas Minaidis

4,681
3
17
25

So please can you tell me what's going wrong , why isn't my request being completed or can you provide with with link so i can understand the post request . I want to do with pure JavaScript not with JQuery. – sahil Jun 02 '20 at 13:45
I've updated the answer with a link to an SO post that can help you figure out what's going on with the POST request and its response. – Kostas Minaidis Jun 02 '20 at 20:53
Are you absolutely sure you can POST to the http://www.filltext.com/ API? I am not sure that the current service supports POST requestss. – Kostas Minaidis Jun 02 '20 at 20:55
@Kostan i'm not sure wether POST works on the filltext api but manually you can add data an object Press enter the values get updated , but i have a feeling that we can post it too – sahil Jun 03 '20 at 08:35
If the server does not support POST requests, you cannot POST and will get back an error message. Working with objects and data in the realm of JS is another thing though. – Kostas Minaidis Jun 03 '20 at 11:50

score -1 · Answer 2 · edited Jun 02 '20 at 12:44

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.

I'm not able to POST data using JavaScript Ajax

2 Answers2