TypeError: $.ajax is not a function in jQuery [Solved]

# TypeError: $.ajax is not a function in jQuery

The "$.ajax is not a function" error occurs when loading the slim version of jQuery and trying to use the ajax function.

The ajax function is excluded from the slim jQuery version. To solve the error load the regular jQuery version on your page.

If you use a bootstrap HTML template, you have to remove the script that loads the jQuery slim version at the bottom of the template.

Instead of loading the slim version, load the minified version of jQuery. You can find a link to the CDN by going to the jQuery site.

jQuery regular version

Make sure to add a script that points to the minified version and not the slim one.

The error might also occur if you have multiple different versions of the jQuery library loaded on the same page.

Here is a working example of using the ajax function.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ load jQuery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <button id="btn">Make request</button>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here's the code for the index.js file.

index.js

Copied!
$(document).ready(function () {
  $('#btn').click(function () {
    $.ajax({
      url: 'https://randomuser.me/api/',
      dataType: 'json',
      success: function (data) {
        console.log(data);
      },
    });
  });
});

The code for this article is available on GitHub

We added an event listener to the button. Every time the button gets clicked it makes a GET request to an API and logs the output to the console

If you load the page and click on the button, you will see the API response printed in your console.

If you still get the error you might be loading the jQuery library twice.

Loading the library twice re-runs the initialization process and causes the error.

If you are loading the libraries from files on your local file system, make sure to specify the paths to the files correctly. Specifying an incorrect path to a script is equivalent to not loading the script at all.

You can check if you're loading the scripts correctly by opening your Developer tools by pressing F12 and clicking on the Console tab.

If you see any 404 errors related to loading the jQuery scripts, then the path to the file is incorrect.

The code for this article is available on GitHub

# Conclusion

To solve the "$.ajax is not a function" error, add the regular jQuery script to the page and remove the slim version.

The slim jQuery version doesn't include the ajax function.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

TypeError: $.ajax is not a function in jQuery [Solved]

# TypeError: $.ajax is not a function in jQuery

# Conclusion

Borislav Hadzhiev