CODEWITHSUNDEEP
javascripthtmlapi
MaxEnough
MaxEnough

Reputation: 3

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

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

Upvotes: 0

Views: 354

Answers (1)

Nathan Champion
Nathan Champion

Reputation: 1312

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.

Example

Upvotes: 1

Related Questions