Skip to main content
X

Explore your training options in 10 minutes

How to Use jQuery get()

Ryan Manchester - January 04, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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() :

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

$.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.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Ryan Manchester

About the author: Ryan is a technical writer at Career Karma, where he covers programming languages, technology, and web development. The Texas native earned his Bachelor's of Music Composition from the University of North Texas. Ryan is currently pursuing further education in web development, aiming to graduate from Flatiron School with a certification in full stack web development. Since joining the Career Karma team in November 2020, Ryan has used his expertise to cover topics like React and Ruby on Rails.

Skip to main content