Borislav Hadzhiev
Last updated: Oct 19, 2021
Check out my new book
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.
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.
Make sure to add a script that points to the minified
version and not the
slim
one.
Here is a working example of using the ajax
function.
<!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>
Here's the code for the index.js
file.
$(document).ready(function () { $('#btn').click(function () { $.ajax({ url: 'https://randomuser.me/api/', dataType: 'json', success: function (data) { console.log(data); }, }); }); });
We added an even 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 the button, you will see the API response printed in your console.
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 does not
include the ajax
function.