How to send an API get request using JavaScript with HTML variables

Question

I am trying to make a GET request to a web API using what is inputted in a textbox. So far I have the input value established but can't seem to figure out to send the request.

      const inputdata = document.getElementById('request');
      const requestdata = inputdata.value;
      console.log(requestdata);

This function correctly but I can't seem to figure out the rest.

I am trying to do the following:

https://api.example.com/request?=${requestdata}
or
https://api.example.com/request/${requestdata}/test

Keep in mind that this is a static HTML site with no Node

Nathan Champion · Accepted Answer · 2021-04-20 17:09:55Z

1

Something like this should work to make an asynchronous GET request:

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true);
    xmlHttp.send(null);
}

const inputdata = document.getElementById('request');
const requestdata = inputdata.value;

httpGetAsync("https://api.example.com/request?=${" + requestdata + "}");

<input type="text" id="request" value="test">

If you check the developer tools > network tab you should see the GET request to the API endpoint.

answered Apr 20, 2021 at 17:09

Nathan Champion

1,3301 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MaxEnough Over a year ago

This works great, but I keep getting an error because of the .send(null). Am I doing something wrong?

Nathan Champion Over a year ago

It should be null for GET requests. You can see more info here: developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send. What error(s) are you getting?

Collectives™ on Stack Overflow

How to send an API get request using JavaScript with HTML variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related