How to Use jQuery get()

A cornerstone of building a web application is using HTTP requests. HTTP requests allow data to be captured from a user input then sent through the back end to a server.  Afterwards, a response is returned.

Sometimes these requests send data that is saved to the database, as in a POST request.  Other common requests receive a response and display it to the user. This is known as a GET request. jQuery has a get() method that makes sending a request a streamlined process.

What is jQuery get()?

jQuery get() is a method that sends a GET request to a URL endpoint and receives a response. The response is data sent back from the server. Unlike a POST request, a GET request only receives pre-existing data from the server. It does not save anything to the database.

A GET request is useful for requesting a specific subset of data and doing something with it. For example, if we are building an e-commerce app, we would send a GET request to a URL endpoint to access products. We can take the data received in a response, and style it to create a card layout of all the products available for purchase.

jQuery get() is responsible for sending a request to a URL and receiving the data as a response. The developer now has access to the data from the server and can choose to display it to the user as desired. 

Now that we are familiar with what a GET request is, let’s look at the get() method’s syntax.

get() jQuery Syntax

jQuery makes sending a GET request straightforward. get() receives the URL address as a string and a callback function to receive the data. Basically, a callback function is a function passed to a method to be executed at a later time.  

For a more in depth explanation of callback functions, check out this guide. 

There are a few optional arguments get() accepts, but the most commonly used are the URL and callback function.

Sticking with our e-commerce example, let’s see what a basic GET request would look like using get():

$.get('/products', (data) => {
  console.log(data)
  })

We call get() and pass it the URL as a string. The request is being sent to the products index page and the server will send back the data. The callback function accepts a few arguments, but data and status will suffice for our purposes.

Data represents the data received from the request. In our example, we are simply outputting what is returned in the console. jQuery was built to recognize a few data types, but most likely we will get a JSON object.

Further code will be needed to extract the desired information from our JSON object. Let’s take a look at how we might do that.

jQuery get() Example

For our example, let’s use a fun API. This site tells us how many astronauts are in space right now! It also gives us the names and space crafts. Let’s start by passing the URL to get():

$.get('http://api.open-notify.org/astros.json', (data) => {
  console.log(data)
 })

When we send the request, we get this response logged in our console: 

From the URL, we already know we will get a JSON object returned from the server.  In the console, we see the keys of “message”, “number”, and “people.”  The message value of success helps in error handling.

The number key refers to the count of people in space. “People” points to a value containing an array of objects. From here, we could iterate over the “people” array and display that information to the user as a list. Getting data back like this leaves the choices to the developer on how to display the data returned by the server.

Conclusion

We reviewed what a GET request is and how jQuery makes it quick and straightforward.  After getting familiar with common syntax practices, we saw get() in action. It’s important to note that the data can be iterated and rendered from the body of the callback function. 

From here, a fun project could be looking up  simple APIs and building small projects to practice sending GET requests and displaying that data. Receiving and rendering the data in a pleasing way is the beginning of becoming a proficient developer.