jQuery Ajax Tutorial #1 - Using AJAX & API's (jQuery Tutorial #7)

[@fiandrhi]

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.

[@BEBE-nf9sf]

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. ;)

[@janorajmond]

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

[@CBQReview]

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

[@marduv]

Bro, i loooove your video. Straight forward, easy to understand and the not saying any unnecessary info.

[@learncodeacademy]

+marduv Thanks a ton!

[@ellmatic]

+marduv Like, totally tubular brooooo! Surf's up duuuuude! Bogus!

[@AjaySharma-jv6qn]

Excellent Approach of teaching - Sound, Speed, time taken to express Superb

[@nehneh5488]

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!

[@cathairr]

This was exactly what I needed to understand how routing and RESTful APIs work. Thank you!

[@kamallochanboruah732]

most clear and understanding jQuery vid thanks. watching in 2020

[@tylerdurden9585]

where do you get the note from the backend team? please explain. video is a bit incomplete.

[@Straitoil]

1:05 seconds in and I love you sir. Go on.

[@learncodeacademy]

Ajax Pt 2 releases Thursday @ 11am PST Ajax Pt 3 releases Friday @ 11am PST

[@learncodeacademy]

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.

[@learncodeacademy]

does this help? stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax

[@learncodeacademy]

glad to help!

[@Ideaman47]

+LearnCode.academy Your tutorial is amazing! BIG THANKS!

[@learncodeacademy]

Great to hear...thanks for the comment!

[@suzyliu7335]

This video is awesome! It helps me solving a problem that i've been stucked for many days

[@SirMasterToast]

0:32 He said, "Yippee" with no hesitation or sarcasm and I'm sold!

[@vladio]

Every single code you typed, you explained it very easy. Thank you!

[@stickybons3319]

I think I learned more in this video than I did in my entire semester in my databases class.

[@arnity123]

You explained this so well. I have been struggling with ajax but now I really understand it with your video. Thanks!

[@learncodeacademy]

awesome, thanks a ton! That's great to hear.

[@markgrover8184]

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.

[@markgrover8184]

+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!

[@funkiekeda]

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.

[@learncodeacademy]

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.

[@kevinmesto608]

is there a link to the API you are using?

[@johnsamson4124]

Thanks this is the only tutorial that made sense and easy to follow thru. Cheers!

[@3xtraspicy]

hey dude, your channel is pure awesomeness! really learned a lot from watching your videos

[@annu2022paulose]

This video is an answer to my prayer!! thank you for explaining this in such a simple manner :)

[@learncodeacademy]

Annu Abraham Awesome, great to hear. Thanks.

[@zaktrytodive7582]

Thank you man, your content helped me a lot on understanding JQuery mecanics, hope you were my real life teacher :p

[@learncodeacademy]

+ZakTryToDive Thanks! Glad to help!

[@patrickmotard4048]

Thank you SO much for this tutorial. I had a hell of a time finding this online. Exactly what I needed. Well explained!!

[@learncodeacademy]

Thanks man!

[@rezafarzin]

A very clean and to the point tutorial

[@vinzanity68]

Great teaching style for intermediate level. Not too slow😅

[@brandonharwood7301]

For those who want it, I haven't really started but to get the base static HTML and CSS Setup, I also linked normalize.css, copied the HTML seen on screen, and wrote this CSS to get a close example of what it looks like. I'm still pretty new so this probably isn't the best or prettiest CSS, but here y'all are: body { padding-left:5em; } #orders li { background-color: #e3e3e3; margin-bottom: .5em; padding-bottom: .4em; padding-top: .4em; padding-left: .4em; margin-right: 20em; list-style-type: none; margin-left: -45px }

[@brandonharwood7301]

And here's the HTML seen on screen (at least at the beginning of the video). Note, you may need to link to different jquery and js files depending on your document setup: Jquery Ajax Tutorial Jquery Ajax Tutorial Coffee Orders Name: John, Drink: Coffee Name: John, Drink: Coffee Add a Coffee Order name: drink: Add!

[@drum998]

Thanks, these tutorials were pitch perfect for what I needed (a refresher after some years out of the web dev world). Cheers.

[@GuitarreroDaniel]

I'm working on a legacy JS project and this was very handy, thank you very much.

[@dhruvpatel3837]

Can we add order.name as ${order.name} and same as drink at 7:04 in video?!

[@vandivicario9006]

dude love your video. so easy to understand

[@oscardiaz9170]

You are the best... I dont know how you do it, im mexican and i understanded it everything :)

[@learncodeacademy]

+oscar diaz hey, that is impressive (pats his own back). Glad to hear it helped, Oscar!

[@samehabbadi8243]

You pretty tutorials really help me. Thank you.

[@FranciaMolina]

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?

[@laurentm2966]

Thanks man ! Best course on Ajax for me ;) Really helpful

[@johnn5019]

This is exactly what I was looking for. Excellent instructional video!

[@muradalam6595]

Thank you for your great tutorials

[@AlanSarluv13]

Hii, thank you for the ajax tutorial, i do exactly the same like your tutorial, but i dont know where should i create that API file and what extension that orders use ?? is it .json, .xml, .txt or what ?? it's not working on my localhost browser..

[@learncodeacademy]

you'll need to use node.js, php, Ruby on rails, etc to make a backend api. Or, you can use a backend-as-a-service like parse.com, firebase, or backendless

[@AlanSarluv13]

Okey i'kk try php. Sorry to ask the basic question, still newbie in programming.. Thanks anyway, your tutorial help me a lot

[@NoahNobody]

Wow, you are a really good teacher. Subbed.

[@briankgarland]

Best. Video. Ever.

[@igniculus_]

backend team provided you at api/orders what does that mean ? is there a json file in api/orders ?

[@zwembadsniper6883]

Ani H. No it generates a json response

[@psyvegas7187]

very clear and precise tutorial I've seen. thanks!

[@datduong6520]

How can the program distinguishes between two "orders"? For one is a variable and one is an array?

[@Trollation]

como eu acesso o (data) fora do escopo da função?

[@brookies1910]

Really really great video, helped me a lot

[@Patrick-iy1rb]

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.

[@kiarashclassic]

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,

[@emptygallery1321]

Hey guys i'm confused by this one - is 'Orders' a separate file i need to create?

[@deepakparamesh8487]

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.

[@learncodeacademy]

+deepak kumar look into Express.js Here's 2 videos I have on Node.js backends: - kzbin.info/www/bejne/poacgmmlnraBmpI - kzbin.info/www/bejne/fKKweqyKfZ6qick Lumen (lumen.laravel.com) is another simple choice which will be PHP.

[@andrewmcbride88]

Great examples and walk through. Very helpful, thank you

[@enkr1]

It's so clear. thanks

[@doniderawski8663]

Very useful! Thanks

[@TheWolfPackFam]

Thank you for this awesome explanation!

[@solmillin]

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

[@lakshyagoel9661]

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

[@imondal007]

I don't understand how id does updated automatically when you make post request every-time, please explain it Thanks in advance.

[@ashishjohnsonburself]

this video saved my day !!! :) thanks a lot @LearnCode.academy

[@jamn52]

Dude, AWSOME !!!

[@sagorali7997]

super bro,you can teach easy ,,thank you bro

[@turboromy]

Is this Corey Schafer ? I can't forget your voice from amazing Python tutorials.

[@rameshmunjal6841]

very good video . Thanks a lot Bro

[@polesetti]

very useful playlist, thank you

[@brianvanvlymenpaws]

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?

[@erikleisch1257]

Do you have a tutorial on how to create the API?

[@dancekinghoseok4608]

Erik Leisch pls

[@MrKhelkun]

On one of the above comments the author is suggesting this for PHP simple approach of the RESTful API based on Codeigniter PHP framework github.com/philsturgeon/codeigniter-restserver

[@Toochilledtocare-_-]

an api is actually really simple to build. use node and express.js as your server and build the database with mongodb. then use mongoose to define the models you need and connect your db to express. with that, build requests to handle what's coming from your front-end to your back-end. so my ajax request my point to 'posts/add' which could send form data or anything else as defined in my ajax request. Then my server would have app.post('posts/add', function(req, res)and inside and i could handle the data with var title = req.body.title

[@georgebolqvadze1532]

Thanks, bro

[@HellYeah223]

Amazing tuto, thank you :)

[@rexli2017]

good video, very clear

[@darrenhughes4444]

I'm very new to Javascript, Html and CSS and by extension to jQuery and AJAX and API. Have been playing around with this with the RESTful API and have noticed that your success: function(orders) seems to break if there is only one object in the API. It breaks down the Object into it's sub-objects (sorry if terminology is incorrect - i.e. name becomes an object, id becomes an object and drink becomes an object) and then looks within those sub-objects for the parameters (i.e. looks in name object for id, name and drink. then looks in drink object for id, name and drink. then looks in id object for id, name and drink). The result is that I end up with three results in my coffee order all with names and drinks that are undefined. Do I use an IF statement here to try and count if the objects are one and then add a .each statemnet if there are more than one objects?

[@learncodeacademy]

+Darren Hughes $.each would do that if it received an object instead of an array. Is the REST api returning just a single object when there's only one item?

[@darrenhughes4444]

+LearnCode.academy The REST api is returning this array (for example) {"name":"Jimmy","drink":"Coco","id":"56eb5d5d721b1d01009d79e0"} however when I run the function it breaks. It turns all three objects into arrays and then searches for objects within those arrays which of course it doesn't find. I then end up with 3 undefined responses. When I check in the Network tab in Developer Tab it shows one array. Here is a copy of my code if that helps: $(function(){ var $orders = $('#orders'); $.ajax({ type: 'GET', url: 'rest.learncode.academy/api/learncode/friends/56eb5d5d721b1d01009d79e0', success: function(orders) { $.each(orders, function(i, order) { console.log(order); $orders.append('name: '+ order.name +', drink: '+ order.drink + ''); }); } }); });

[@thefloow11]

With jQuery 3.5.1 I get the error „invalid operand to ‚in‘: object expected.

[@dream_emulator]

What did the backend team build exactly?. I see the Practice page but I want to rebuild this whole clip to learn how to do it...

[@learncodeacademy]

+Sebastiaan Hols What the backend team built was a "RESTful API" that uses a database to store the data. MySQL is the most popular database used.

[@oODakoTaOo]

+Sebastiaan Hols You can use also a link of any JSON file that is provided through some API in the internet through the ajax GET request.

[@dream_emulator]

+Genosse der Bosse thanks! That's helps a lot :-)

[@henkstreepjejan]

Little question, Isnt it handier just to use PHP for database related things, PHP and JavaScript work great together if u know how and you can use things like MySQL?

[@learncodeacademy]

Yeah, for sure. This example is using JS to talk to a backend that uses a database...that backend can be any language/db combination - JS doesn't really care.

[@henkstreepjejan]

OK thanks!

[@AbstractAbsorption]

Great tutorial, thanks.

[@jeehooahn9114]

This presenter is so good

[@beatakozie7334]

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

[@Badboyifier]

But it doesnt refresh without page reload, why is that? so everytime the json gets updated, the page doesnt, without refreshing, why is that?

[@jeromematthews392]

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.

[@learncodeacademy]

I should put together a quick and dirty public rest api for users to access...great idea!

[@jeromematthews392]

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.

[@travisheller8003]

LearnCode.academy Did you ever end up doing this? adding a quick and dirty public rest api for users to access?

[@learncodeacademy]

Sure did! rest.learncode.academy/ Here's a video on it: FREE REST API - Practice Developing Javascript AJAX Apps with this API

[@jeromematthews392]

Epic! Much Thanks for this Man! :D Been checking out your content. truly helpful stuff especially for beginner developers like myself! :)

[@Milchreiz]

thanks for the nice video tutorial. but one question, how does the backend work? what do you use therefor?

[@learncodeacademy]

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

[@Milchreiz]

Cool. I will watch it. Thanks for the fast answer :)

[@MicroUrb]

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?

[@learncodeacademy]

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

[@RemoteTactical]

As quick as that was - it was easy to follow and I "got it" lol

[@sumantbagade4903]

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

[@learncodeacademy]

+Sumant Bagade instead of $someSelector.append(), just use $someSelector.html() to replace the contents.

[@anonymous-do5bs]

basically, ajax will return stuff from a database. what else can it be used for?

[@sanaanmarabi2769]

do you have more videos for ajax?

[@imanimbwaga7005]

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

[@Ghaleon15]

How do you do that with the file bars? (larger)

[@רויטלבןלולו-ת5פ]

its great but where can we find the code ??? i didnt find it on github

[@ThangaSenthilRaja]

Thanks for the course!

[@bendyamin86]

I would really love an AJAX tutorial on a Contact Form that successfully sends to an email address without reloading the page. I can't seem to get any of the tutorials on YT to work... Please please please! I hate how my website needs to reload after sending a PHP request in my contact form.

[@koripellamohanakrishna2686]

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

[@oatlylatte9]

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.

[@kayele]

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?

[@ervincasiguran]

hi LearnCode.academy why do we not use XML anymore? what does it mean?

[@babatundeonabajo]

Someone here will give you a better answer but my understanding is that JSON is preferred to XML because JSON is more readable and comparable in syntax to JavaScript than XML. I think that's true though one benefit of knowing XML is that you can use it to style the appearance of apps on the Android platform so it gives you a skill in addition too designing web pages.

[@LesgoBrandon7]

Do you have a site or anything where we can download the source code?

[@learncodeacademy]

rest.learncode.academy/ has some code examples, but no full source-code I'm afraid.

[@incredibleindians4872]

bro what code editor is that?

[@brobinbraauw5523]

The api/orders returns a .json file right?

[@kozmicluis2552]

What sublime color scheme are you using? Thanks for the tutorial!

[@learncodeacademy]

+Luis L. I'm using the Cyanide theme and the Cyanide/Monocyanide - Contrasted Semi scheme

[@biotechpro8209]

please help i got this erro Uncaught TypeError: Cannot use 'in' operator to search for 'length' in { "id":"1", "nama":"alan", "umur":"14" }, { "id":"2", "name":"Mona", "umur":"12" },

[@thePocketWatch45]

so...backend team...here's what I found after 3 days of study: apiary.io/. create an api and host it using apiary.io/. then this video makes more sense. I am very new with sharing solutions online so please correct me if I'm wrong.

[@victorlogos4237]

Hi, Thanks for your great tutorials, could you suggest me where can I learn how can I connect my html file with my database ?

[@Aktunes47]

FAN! very well explained.

[@ozaki0318]

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??

[@celestine1107]

Wow I like your teaching. Let me become your student please.