jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)
HTML-код
- Опубликовано: 17 июн 2014
- Free RESTful API to use for practice!: rest.learncode.academy/
In this jQuery AJAX Tutorial for beginners, we're going to be covering an introduction to using jQuery to access a JSON API (Application Programming Interface) to get data and populate it into the document. jQuery AJAX is powerful and is the first step to making dynamic websites that respond to the user actions as they happen. The first part of using jQuery AJAX to access a JSON API is to make a GET request, so this jQuery lesson covers how to make AJAX Get Requests with jQuery & JSON.
Lesson #1: jQuery Tutorial for Beginners
• jQuery Tutorial #1 - j...
Lesson #2: Listen to user events and respond with jQuery actions!
• jQuery Tutorial #2 - E...
Lesson #3: Clean up the jQuery by putting some data in the HTML
• jQuery Tutorial #3 - W...
Lesson #4: "DOM Traversal" with jQuery
• jQuery Tutorial #4 - D...
Lesson #5: Building a jQuery Tab Panel Widget
• jQuery Tutorial #5 - B...
Lesson #6: Building a jQuery Slider / DOM Caching
• jQuery Tutorial #6 - B...
Lesson #8: Ajax Pt 2 - posting data to the backend
• jQuery Ajax Tutorial #...
~-~~-~~~-~~-~
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
• Responsive Design Tuto...
~-~~-~~~-~~-~ 
Хобби
![mgk - I Think I’m OKAY (with YUNGBLUD) (Sad Version) [Official Music Video]](http://i.ytimg.com/vi/7AC1uqQLIg4/mqdefault.jpg)
I haven't done Ajax in 5 years, and I just needed a quick and dirty example to refresh my memory, and you're the only person who gave it. Thanks.
This was exactly what I needed to understand how routing and RESTful APIs work. Thank you!
This video is awesome! It helps me solving a problem that i've been stucked for many days
0:32 He said, "Yippee" with no hesitation or sarcasm and I'm sold!
Every single code you typed, you explained it very easy. Thank you!
First, I've been following your video, and it's 2018. Great teaching. Thank you!
For total beginners like me who are watching this video wonder about the backend file. To just first grab the concept of Ajax, we can skip the API part and just create a .json file and type in an array of object:
so in the "orders.json" file we have:
[
{
"id": 1,
"name": "James",
"drink": "Coffee"
},
{
"id": 2,
"name": "John",
"drink": "Latter"
}
]
and in the main.js file we just adjust the pathname at the url: 'orders.json' the rest of the code the same. ;)
For me that just leads to the following warning (and doesn't get the data):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///. (Reason: CORS request not http).
1:05 seconds in and I love you sir. Go on.
These videos go dumb hard. I'm well on my way to doing good front end and back end web development. thank you for the indirect support. Imma mention this channel in my Nobel prize speech :) :) :) :)
You're like super cool, man. Absolutely amazing tutorials with a great positive vibe to them. I wish I found this when I were learning the bases, I will make sure to recommend your stuff.
Thanks! I appreciate it. Yeah, I'm doing these mostly, because I wish I had someone show me this stuff when I was starting out...would have saved YEARS.
very clear and precise tutorial I've seen. thanks!
Thanks this is the only tutorial that made sense and easy to follow thru. Cheers!
I think I learned more in this video than I did in my entire semester in my databases class.
A very clean and to the point tutorial
You explained this so well. I have been struggling with ajax but now I really understand it with your video. Thanks!
awesome, thanks a ton! That's great to hear.
hey dude, your channel is pure awesomeness! really learned a lot from watching your videos
Excellent Approach of teaching - Sound, Speed, time taken to express Superb
I'm working on a legacy JS project and this was very handy, thank you very much.
Yours must be the only tutorial that I slow down instead of speeding up, because you don't talk a lot of s88t. And, thanks for that!
Thanks man ! Best course on Ajax for me ;) Really helpful
Thanks, these tutorials were pitch perfect for what I needed (a refresher after some years out of the web dev world). Cheers.
Wow, you are a really good teacher. Subbed.
You pretty tutorials really help me.
Thank you.
Thank you very much for the useful lecture!
in case that API require an api key, where and how should I put the description of the key??
Hi,
Thanks for your great tutorials, could you suggest me where can I learn how can I connect my html file with my database ?
Thank you for this awesome explanation!
is there a link to the API you are using?
most clear and understanding jQuery vid thanks. watching in 2020
Thank you SO much for this tutorial. I had a hell of a time finding this online. Exactly what I needed. Well explained!!
Thanks man!
Just getting up to speed on all these technologies. Amazing. Thanks so much. Could you mention what tools and setup you're using? It looks like Visual Studio Code with a live page. What's the bottom right page? Is it the Browser 'Inspect Element'? Love to know your setup :)
Bro, i loooove your video. Straight forward, easy to understand and the not saying any unnecessary info.
+marduv Thanks a ton!
+marduv Like, totally tubular brooooo! Surf's up duuuuude! Bogus!
As quick as that was - it was easy to follow and I "got it" lol
This video is an answer to my prayer!! thank you for explaining this in such a simple manner :)
Annu Abraham Awesome, great to hear. Thanks.
dude love your video. so easy to understand
Thanks!
GOD bless you and keep you :).
Thanks for the course!
very useful playlist, thank you
Amazing tuto, thank you :)
Could you make a video how to send one value to API and how does it look for both sides? I am really confused after these videos...
Thank you for your great tutorials
Really really great video, helped me a lot
Thank you man, your content helped me a lot on understanding JQuery mecanics, hope you were my real life teacher :p
+ZakTryToDive Thanks! Glad to help!
Great tutorial, thanks.
It's so clear. thanks
Very useful! Thanks
hi man i am new and i want to say something that i dont know a dam thing related to API so can you create toturial on XML or JSON whatever you use? Thankyou
this video saved my day !!! :) thanks a lot
@LearnCode.academy
thanks so much helped me a lot
Do you still need to call another script or link another specific jquery file especially for ajax or is it already included in the standard jquery script.
thanks so much for this!
Ajax Pt 2 releases Thursday @ 11am PST
Ajax Pt 3 releases Friday @ 11am PST
At the end of the day, you'll use get/post/put/delete methods to access services and get them to your application code. If it's a javascript app, you'll use javascript, if java, use java, etc. It's really about what program is needing to access the data. For anything HTML/CSS/JS webapp related, you'll just ajax requests and process them with javascript.
does this help? stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax
glad to help!
+LearnCode.academy Your tutorial is amazing! BIG THANKS!
Great to hear...thanks for the comment!
This looks like a good tutorial, I plan to follow it more closely tonight. My concern right away is the use if IDs instead of classes. Any particular reason?
+Daniel Cortes I used ID's since there are specific things I can count on: an orders UL, a name/drink input, etc. Classes work just as well if you can't guarantee these fields will be unique.
Great video man, i'm wondering if you could do a tutorial based on Angular.js ajax, with the $http service, and also teach how to retrieve specifc data and not all of it! Thx!
super bro,you can teach easy ,,thank you bro
thanks for the tutorial good sir! but i do have a problem where the ajax is loaded but I can't seem to display the content even with console.log like you did. what did i do wrong here...??
UPDATE: fixed! turns out i need to remove the comma on the json file lol silly me.
When using the .each function, $(.streamsname).append vs $(.streamsname).html. when using the html it will output only one at the last of api. Is best practice to using the .append than .html?
good video, very clear
I learn more from books. Watching a series like this will take most of the same amount of time to read a complete book on the subject and learn in depth.
Never mind the hundreds of tutorials that dont leave you like a fish out of water asking about API's and waiting for a response.
+Mandar Ponkshe most definitely .
I would urge you to learn with an open mind when reading it though. A would suggest the series call "You don't know JS" followed right after as these two will open up your mind to different ways to use JavaScript and introduce you to the most important pitfalls to be aware of. I find myself learning from chapters that introduce basics. Happy learning!
very good video . Thanks a lot Bro
backend team provided you at api/orders what does that mean ?
is there a json file in api/orders ?
Ani H. No it generates a json response
Is this Corey Schafer ? I can't forget your voice from amazing Python tutorials.
What sublime color scheme are you using? Thanks for the tutorial!
+Luis L. I'm using the Cyanide theme and the Cyanide/Monocyanide - Contrasted Semi scheme
Great tut. Can you recommend a tut to show us how to set up our own restful api so we can use ajax to fetch json locally also?
I don't understand how id does updated automatically when you make post request every-time, please explain it
Thanks in advance.
You are the best... I dont know how you do it, im mexican and i understanded it everything :)
+oscar diaz hey, that is impressive (pats his own back). Glad to hear it helped, Oscar!
This is exactly what I was looking for. Excellent instructional video!
The api/orders returns a .json file right?
FAN!
very well explained.
This presenter is so good
How do you do that with the file bars? (larger)
Great examples and walk through. Very helpful, thank you
Best. Video. Ever.
Dude, AWSOME !!!
Thank you so much!!!!!
basically, ajax will return stuff from a database. what else can it be used for?
Awesome thanks alot
where do you get the note from the backend team? please explain. video is a bit incomplete.
Great video. One ques-- I want that when user puts new value in the "" box, i want to display the result into new html and not append the result into existing html and create long lists . How can i do that? Thanks in advance .. :)
+Sumant Bagade instead of $someSelector.append(), just use $someSelector.html() to replace the contents.
do you have more videos for ajax?
Thanks for the vid (Y)
can we use in this $each fn something like this =>, $orders += ' name: +..... '; will be it correct? or better use appendTO?
Hey guys i'm confused by this one - is 'Orders' a separate file i need to create?
thanks for the nice video tutorial. but one question, how does the backend work? what do you use therefor?
Check out these tutorials on Node.js & Mongoose...they're not so much recorded for webdev beginners, but will give you an idea of how that goes down.
Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js
Node.js MongoDB Tutorial using Mongoose
Cool. I will watch it. Thanks for the fast answer :)
hahahah 0:58 you've killed me so funny , thx alot , thx a ton :)
How can the program distinguishes between two "orders"? For one is a variable and one is an array?
HI, I have followed the same but am getting Uncaught Type Error: cannot read property ''name' of null and in html page it is displaying name=undefined drink=undefined
Good stuff :)
How would you implement this with a SharePoint List, you are getting the list data with the REST but in the console log you get [object Object] > [function] [value] (value has my array of 78 items). I get this array that has two arrays and doing your example on my request gives me both arrays' information and I only want the second one, value?
Hey guys. planing to work as a web developer. I know HTML5, CSS3 and now Im starting to learn JS. Should I focus mainly on jQuery? And what knowlage do I need to have in JS and jQuery to get a job? I dont have an idea how much do I need to learn.. Thx
+EE Tech Learn JavaScript first and pick up jQuery if and when you need it. jQuery usage is going to continue to fall over the coming years as browsers are much easier to work with than they were a couple of years ago, mainly due to the death of IE < 11. Run through LearnCode.academy JS course especially when it comes to OOP and read JavaScript the good parts.
Suggestion: video on creating APIs
Yeah, I definitely want to add more node stuff. The express and mongoose videos are close, but they're more skimming the surface than really in-depth tutorials.
Hi there, I saw the tutorial and thought it would be good to follow along with the code. Question: How would the viewer at home have access to the API data that you're referencing in the tutorial? I'm aiming to learn to build both the back and front end parts as a full stack developer so being exposed to that and being able to maybe build on it or play with it would be great since I'd like to code along with the demo.
Is there a way for the viewers to access the data to follow along the series as well ?
Thanks.
I should put together a quick and dirty public rest api for users to access...great idea!
Glad I could help!! :D
I'll be waiting to see it!
Hope its soon!
Would be great if you could also explain the thought process and execution of that (restful API's), so we could learn to build our own restful api's, after learning about AJAX and JQUERY working together. I know I'm bewildered by the term.
LearnCode.academy Did you ever end up doing this? adding a quick and dirty public rest api for users to access?
Sure did! rest.learncode.academy/
Here's a video on it: FREE REST API - Practice Developing Javascript AJAX Apps with this API
Epic! Much Thanks for this Man!
:D Been checking out your content.
truly helpful stuff especially for beginner developers like myself! :)
Thank You for the tutorial, cheers , but i have stack somewhere, Iam making an application where by my interest is to grab view by id, but when i tried using the same code on accessing id am getting an error data undefined, please any one with solution please help me, i am stack
can you plz tell me abt ur localhost connectivity
Hi, thanks for the tutorials!!!
I didn't get why are you defining the i parameter in the second function if you are not using it
Cheers from Tenerife!!
+edumambo69 you have to define the first parameter in order to define the 2nd one. If you did success: function(order), then "order" would still have the value of i (the item's index)
+LearnCode.academy Ok. Thanks for the response!! keep up the good work :)
this is great.
hi learncodeacademy,
in this video u have used "order/api" as your url.. but i am confused about how to setup the backend for implementing ajax.
please explain in detail about how to setup environment to implement ajax.
+deepak kumar look into Express.js Here's 2 videos I have on Node.js backends:
- ruclips.net/video/pU9Q6oiQNd0/видео.html
- ruclips.net/video/FqMIyTH9wSg/видео.html
Lumen (lumen.laravel.com) is another simple choice which will be PHP.
Awesome thank you! Would you mind posting a video tutorial [Full project like a simple POS in a restaurant using mysql], that will help a lot to wrap up what we've learned from you,
awesome nice tutorial
thank u a lot!
como eu acesso o (data) fora do escopo da função?
YEAHHHHH ... LET S DO THIS