jQuery GET JSON from URL Tutorial: Retrieve data from a PHP script

In this tutorial you will learn how to use jQuery to GET JSON from a URL. Recommended training (Free for 7 days) : juniordevelope... 👍
That's on the assumption that the URL you are trying to send a request to actually returns a JSON response but if you have an endpoint or script that returns JSON data (or even a JSON file) then you can use jQuery to retrieve that data.
In the tutorial you will get an understanding of the way jQuery GETs JSON from a URL using the AJAX convenience function built in to jQuery. You could retrieve this data on the page load or it could be triggered on a JavaScript event for example a button click.
You'll learn how to send a GET request to a PHP script locally on your computer which in the example will just return some a basic JSON structure but in reality it could be generated from your web application such as data retrieved from a database.
jQuery has traditionally relied on callback functions built in to it's convenience functions for GET and POST AJAX requests but in the tutorial you will learn how to use jQuery's inbuilt promise chaining system. You'll also use arrow functions to provide the callbacks to this promise-like feature to make your code super tight and readable.
If you'd like to find out more about arrow functions take a look at the Junior Developer Central video at : • JavaScript Arrow Funct...
Using the convenience functions for AJAX the jQuery GET JSON from URL process can be simplified and you can easily connect failure handling in to the chain by ensuring the .fail method has a callback provided. Channel Handle @codebubb

[@codewithbubb]

Learn how to build a cool video music player using the iTunes API: ruclips.net/video/e0e6m2mxJlU/видео.html

[@gamergirlmars]

dude you just saved my life rn. thank you i was so stuck! great video. :)

[@salahtaj20]

Thank you.

[@codewithbubb]

You're welcome! Anything else you need help with?

[@salahtaj20]

@@codewithbubb I'm a beginner, I tried this code on Cordova to fetch data from mysql but it does not work, if you send me the code I'd be thankful for you.

[@codewithbubb]

The jQuery AJAX should be pretty much the same?.What's happening when you try and send the request (are you getting errors in the console)? I would suspect it's a cross-origin type problem.

[@salahtaj20]

this is serves file

[@salahtaj20]

and i send url to my server as localhost:1235/getemployee.php?id=15

[@rw7799]

when using api's to get the data e.g. wordpress api blogs , is it ok to display the url on the main page for security reasons. Or doesnt it matter? i use php an include it at moment from another file... not sure if i need to though .. thx,

[@codewithbubb]

Good question Rich. It's not something to worry about, anyone who has a little insight will be able to work out which APIs / services you're using. If it's just displaying or using data on your site (like using the WordPress API) then it's publicly viewable anyway so you don't need to worry! Hope that helps.

[@rw7799]

@@codewithbubb cheers. I wondering about the crud part of it where u can edit etc blogs. Not looked properly at it yet.

[@codewithbubb]

@@rw7799 Yeah, if you're sending back data and only want authenticated to have access you'd need to secure the endpoint using a JWT or similar. Depends on how your API has been constructed and what options you have

[@rw7799]

@@codewithbubb cool

[@dynaa4168]

Hi, u want to ask, is it possible ti do something with the data aside from console.log(data)? For example, if i want to alert 'success' in the website after getting json data from url?

[@codewithbubb]

Hi, of course yes! You can do anything you like with it. In fact, more often than not you'll get JSON data back from your endpoint which can be used (as a JavaScript object) inside your code. Think letting getting information about a user for example. Hope that helps?

[@dynaa4168]

@@codewithbubb yes it helped thank u. So the alert(success) have to be added under the success(data) in the .ajax right?

[@codewithbubb]

@@dynaa4168 Correct. The success function will contain the response from the AJAX call.

[@yasirtahirkheli74]

excellent but video sound is too low. great work anyways..Mate....

[@codewithbubb]

Thanks very much Yasir! Apologies about the sound - I recorded that a while ago and my recording 'technique' probably b wasn't great. Thanks for the feedback 😀