JSON and AJAX Tutorial: With Real Examples

  • Am Vor 3 years

    LearnWebCodeLearnWebCode

    Dauer: 40:44

    My front-end course: www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=DE-filmDEAL
    My new advanced WordPress course: www.udemy.com/become-a-wordpress-developer-php-javascript/?couponCode=DE-filmDEAL
    In this JavaScript tutorial we learn what JSON and AJAX are and how to use them to load new data into our webpage on-the-fly.
    JSON URLs I use in the video:
    learnwebcode.github.io/json-example/animals-1.json
    learnwebcode.github.io/json-example/animals-2.json
    learnwebcode.github.io/json-example/animals-3.json
    Link to "beginning" demo code so you can follow along: codepen.io/anon/pen/QKPJmW
    Link to "completed" demo code so you can see a final working example: codepen.io/anon/pen/RGOqQY
    Link to my "JavaScript in Half an Hour" video I mentioned: de-film.com/v-video-zPHerhks2Vg.html
    Follow me for cat pics:
    Instagram: instagram.com/schiff.brad/
    Twitter: twitter.com/learnwebcode
    Facebook: facebook.com/Brad-Schiff-1542576316048470/

Maurice D'Mello
Maurice D'Mello

I have used JSON and AJAX for over the past year. But your presentation was so clear, logical and precise that I never knew I could understand the topic any better. You are a great teacher, who not only knows the topic very well, but you are able to teach it extremely well. Very few can do it the way you did it.

Vor 2 Tage
antonio salzano
antonio salzano

xampp?

Vor 3 Tage
HowtoCGI School
HowtoCGI School

Thank you so much for this well paced tutorial ! Keep up the great work.

Vor 5 Tage
737 MAX MCAS
737 MAX MCAS

I watched this four years ago when it came out and thought to myself: 'Who would ever need to use this?' Today, I am making a Discord Bot which uses mySQL, and I am so happy that this tutorial is still here because it is so useful when getting my data. Thanks!

Vor 5 Tage
Atnaf Abrham
Atnaf Abrham

you are absolutely great, my bro! thank you for sharing this great video and live a long life!!!!

Vor 6 Tage
Fan Yang
Fan Yang

great video

Vor 6 Tage
Fan Yang
Fan Yang

awesome!!

Vor 6 Tage
shubham mahitkar
shubham mahitkar

How to save data in database by using Django, jquery...???

Vor 6 Tage
Mango0nmeth
Mango0nmeth

neatly done

Vor 8 Tage
Andrey Kelip
Andrey Kelip

gooooood!

Vor 12 Tage
Muhammad Zubair
Muhammad Zubair

After user submission quiz, how to dispaly data in json raw form? I hv this code link below: https://github.com/iamevenstronger/quiz In this case after user submission the count all user answer and display correct answer, i want to display data like this in end: {"name":"test name","check":"yes","select":"angularjs","message":"Message text","email":"abc@gmail.com","password":"ABC"} What changes i should made in index.js to display the required result?

Vor 14 Tage
Randy Keller
Randy Keller

This was super helpful! Thanks dude! 👍

Vor 15 Tage
Zeljko Stanisavljevic
Zeljko Stanisavljevic

Fantastic... clean and very interesting way to explain things. Thank you.

Vor 15 Tage
Cham Nil
Cham Nil

Thank you so much SIR ,your teaching style is amazing,I learnt a lot from this video,have you uploaded any videos of handlebars.js?

Vor 16 Tage
Soyaibur Rahman
Soyaibur Rahman

you are the best teacher i have ever had. i will see all of your video even though i know all.

Vor 17 Tage
Ashraful Fuad
Ashraful Fuad

thanks so much clear concept of ajax and JSON

Vor 19 Tage
Singtingz
Singtingz

My console.log messages are not showing up at all in firefox.

Vor 20 Tage
Singtingz
Singtingz

also on chrome

Vor 20 Tage
Joseph Nweke
Joseph Nweke

I hardily ever comment on YouTube, but I found this video to be one of the most explanatory tutorial on YouTube. Thanks a lot!

Vor 20 Tage
Christopher 2020
Christopher 2020

FOR CONVENIENCE [ { "name": "Meowsy", "species" : "cat", "foods": { "likes": ["tuna", "catnip"], "dislikes": ["ham", "zucchini"] } }, { "name": "Barky", "species" : "dog", "foods": { "likes": ["bones", "carrots"], "dislikes": ["tuna"] } }, { "name": "Purrpaws", "species" : "cat", "foods": { "likes": ["mice"], "dislikes": ["cookies"] } } ]

Vor 20 Tage
Gowtham Bhat
Gowtham Bhat

great man!!

Vor 22 Tage
Enrico Dario
Enrico Dario

you have the gift to get people understand me...at least

Vor 22 Tage
LeoLawliet
LeoLawliet

Best tutorial out there.

Vor 22 Tage
André Paiva
André Paiva

Incredible! Thank you!

Vor 26 Tage
madnak
madnak

what is the difference between this and fetch method?

Vor 26 Tage
SAMIT MANDOL
SAMIT MANDOL

Excellent....

Vor 27 Tage
Aung Moe Thu
Aung Moe Thu

thankyou. It's the best explanation for me

Vor 27 Tage
Blero Cani
Blero Cani

thnx man, the best crash course in youtube till now, really

Vor Monat
MNK
MNK

R E S P E C T

Vor Monat
panduranga swamy
panduranga swamy

Excellent, thank you.

Vor Monat
amol pathak
amol pathak

hats off to u man....

Vor Monat
Jota Galván
Jota Galván

thank U

Vor Monat
kakman1958
kakman1958

This was a really great tutorial - clear and precise and I was able to follow it along pretty well. It did raise one question though. Is it possible to pass along JSON data which is not in the form of an external URL? Can JSON data be passed as a parameter similar to how can pass parameters to PHP in a URL?

Vor Monat
Anand Kokatnur
Anand Kokatnur

Can we not access the same data from a database? Looking for that video-> linked to database

Vor Monat
Anand Kokatnur
Anand Kokatnur

Can you post the source code that you used in the tutorial? Thanks

Vor Monat
Tshepo Sepadile
Tshepo Sepadile

Great tutorial. Thank you. 🙏

Vor Monat
Code With Eckno
Code With Eckno

Best tutorial... Thanks a lot

Vor Monat
gorefest213
gorefest213

I added the eventlistener but nothing happens in the console when i press the button. I wrote the same code as in the video. Any suggestions :) ?

Vor Monat
MOHD. FAIZAN
MOHD. FAIZAN

you are too good man I genrerally do not comment but you are just flawless . crystal clear concepts.

Vor Monat
Priyanshu Sharma
Priyanshu Sharma

No 'Access-Control-Allow-Origin' header is present on the requested resource. this is the error i got.

Vor Monat
Lee Martina
Lee Martina

I don't usually gush, but you are very good. "I have a surprise for you. You just learned JSON" is a wonderful moment, and really encouraging, thanks

Vor Monat
Muhammad Waqas Iqbal
Muhammad Waqas Iqbal

Super video, I have never come across anything so complex yet explained in such an easy manner.

Vor Monat
Superbomby man
Superbomby man

Opens video Sees cat eating strawberry Looks at the video title to check if I clicked the right video Wonders if I had been cat rolled Sees the rest of the video Checks uploader's channel to see if there are other cat videos

Vor Monat
edward
edward

There is something VERY wrong about that cat eating strawberries.

Vor Monat
Lovejit Singh
Lovejit Singh

https://skillscourses.org/Beginning-Javascript-With-Dom-Scripting-And-Ajax.html I was really confused with the concepts of JavaScript with Dom Scripting and AJAX. This course is the right solution for every of your problem with a nice practical approach.

Vor Monat
Deric
Deric

If you are watching in 2020 and have made it to the 30 min mark, you may be a bit confused. btn.classList.add("hide- me"); no longer works try: btn.style.visibility = "hidden"; or btn.style.display = "none"; if you want the other text to float in it's spot happy coding! hope this helped someone.

Vor Monat
Deric
Deric

@LearnWebCode ah, I apologize for my naivety. Could you provide me with an example for that matching CSS rule?

Vor Monat
LearnWebCode
LearnWebCode

Hi Deric. Thanks for including your solution. Although classList.add() definitely still works in 2020. Make sure there's no accidental space in "hide-me" and also that you have a matching CSS rule for that class.

Vor Monat
paul edwards
paul edwards

I never comment on youtube videos.... but I paid for course that includes JS, and I've learned more in the first 20 min of this video than I did in 2 dedicated modules to JS in the course...

Vor Monat
Joe Buono
Joe Buono

This is a fantastic tutorial! Thank you so much.

Vor Monat
pj mclenon
pj mclenon

hello the API i am using always returns HTML no matter how i try to fix it it or parse it.....i can only save it to a file .json 1st then i used a script that displays the data or your current script vid to the webpage but i dont know yet how to do both on the click? i guess append or with a dot? ..but is there an easier or better solution as to why my OPEN API i pull data from has a avlid url that displays JSON in the brorwser webpage but not when i try to parse it or decode to display in the webpage ..it comes in as HTML in the console and gives errors when i use jsonparse etc metohds?..Lisa

Vor Monat
ohskynyrdlynyrd
ohskynyrdlynyrd

Do we use fetch instead of this now?

Vor Monat
neils deessea
neils deessea

thank you so much , very efficient teaching .

Vor Monat
ohskynyrdlynyrd
ohskynyrdlynyrd

Great vid

Vor Monat
ravy sun
ravy sun

I love your tutorial , Sir

Vor Monat
effsixteenblock50
effsixteenblock50

This is a great tutorial. However, I noticed that most of the HTML is missing in the "completed" demo code at codepen. I can see it onscreen in the begining part of the video but I thought I'd point it out. Thanks for the great upload!

Vor Monat
Álvaro Rocha
Álvaro Rocha

i have the same problem. Who can help me?

Vor 24 Tage
Niraj Badaik
Niraj Badaik

That intro with the cat was a good ASMR.

Vor Monat
Ben Frese
Ben Frese

Excellent Tutorial. Very well made, thank you so much! Still 100% relevant almost 4 years later.

Vor Monat
Ranjit Abraham
Ranjit Abraham

Thank you so much. It was very easy to understand the tutorial. Loved it.

Vor 2 Monate
NiBi
NiBi

I want my javascript data to be ran though a function I have written in a python file. Is AJAX able to be used for this?

Vor 2 Monate
Saran Kmr6
Saran Kmr6

this is the *best explained* video of those all tuitorials i have seen so far......but amazed,that it was uploaded before 4 yrs..... _Great clean complete work of all time bro_

Vor 2 Monate
Srabana Mukherjee
Srabana Mukherjee

Sir ,which texf editor are you using

Vor 2 Monate
Krzysztof Przybylak
Krzysztof Przybylak

Simplicity is the key thanks bro

Vor 2 Monate
Kiran Kumar
Kiran Kumar

wow.. just WOW... You are a great teacher man.. Love you soooo much. I just came here to know about AJAX as I am learning Django and ajax is useful there.. I definitely learned what you have showed here.. Thanks a ton.. keep going

Vor 2 Monate
Senpai lite
Senpai lite

Thanks foe the tutorial btw...for anyone curious..you can use forEach and template literals(``) to make the code shorter

Vor 2 Monate
Return Sign
Return Sign

You should make videos with Scotty Kilmer!

Vor 2 Monate
Paul Plebian
Paul Plebian

I can only echo other comments - "Natural Teacher" "Best tutorial" etc. Well delivered & brilliant content - Thanks, Oh & subscribed obviously.

Vor 2 Monate
Sathish K
Sathish K

Awesome explanation...🤗

Vor 2 Monate
Be Creative
Be Creative

now we need to learn how to walk before we can run wow loved this line brother you are awesome keep on hacking keep uploading all the videos

Vor 2 Monate
Sunrise Business Club
Sunrise Business Club

I watched tones of JS videos and tutorials and still can't understand HOW u do this, guys?! How u build a logic, write a code above it.. I can't understand JS, so complicated. Will never master it... ((

Vor 2 Monate
Code Forest
Code Forest

You got me excited at the cat part

Vor 2 Monate
System Administrator
System Administrator

Just discovered this excellent tutorial. Thanks.

Vor 2 Monate
Mr. Case
Mr. Case

I love ty👍

Vor 2 Monate
AlexBritoOfficial
AlexBritoOfficial

Question? Me setting the "hidden" property associated with the button equal with to "true" would be the same as just using some styling to hide it?

Vor 2 Monate
Growth Mindset
Growth Mindset

Can someone that is experienced with JSON Errors please help me. I have an unexpected token json at position 78511 that keeps appearing in a small box on my screen when I move through various pages on Youtube. I don't know why and I don't know how to fix it. Some of the videos on Youtube to fix the problem are towards video thumbnails but I don't have any videos so no thumbnails. What is it and how do I fix the it??

Vor 2 Monate
Thamizh Azhagan
Thamizh Azhagan

Fantastic articulation and demo...new to front end..Thoroughly enjoyed...

Vor 2 Monate
Syed Muhammad Abdullah Zaydi
Syed Muhammad Abdullah Zaydi

the tutorial is outstanding! but why didn't you used jQuery.

Vor 2 Monate
Linda Tochukwu
Linda Tochukwu

best tutorial so far , thank you so much, also wanna tell you your voice is so so cool to the ear too, smiles

Vor 2 Monate
Haris Noushahi
Haris Noushahi

Cool

Vor 2 Monate
Georgi Mihov
Georgi Mihov

I love your explanations and very well done tutorial. Actually engaging even for someone with severe attention deficit. Thank you!

Vor 3 Monate
Panos Rod
Panos Rod

Fan fact: Non programmers visit to see new Azax cleanning products.

Vor 3 Monate
Khashayar
Khashayar

w oooo w

Vor 3 Monate
Waleed ELBEATAR
Waleed ELBEATAR

Perfect Explanation , Thanks too much

Vor 3 Monate

Nächstes Video

Basic Javascript Projects

3:01:08

Basic Javascript Projects

Coding Addict

Aufrufe 379 000

Node.js Tutorial for Beginners: Learn Node in 1 Hour | Mosh

1:18:16

Monster Hunter World: Iceborne - Alatreon Trailer

0:53

The First Guy To Ever Swim

4:10

The First Guy To Ever Swim

Ryan George

Aufrufe 373 006

REST API concepts and examples

08:53

REST API concepts and examples

WebConcepts

Aufrufe 4 700 000

What is JSON

10:31

What is JSON

kudvenkat

Aufrufe 167 000

Flexbox Tutorial (CSS): Real Layout Examples

28:46

AJAX Crash Course (Vanilla JavaScript)

1:09:43

AJAX Crash Course (Vanilla JavaScript)

Traversy Media

Aufrufe 323 000

JavaScript in Half an Hour (Without jQuery!)

31:52

What Is A RESTful API? Explanation of REST & HTTP

18:38

JavaScript Template Literals: JSON to HTML

39:34

Brawl Stars: Brawl Talk - Summer of Monsters!

3:49

Call of Duty®: Warzone - Verdansk Air Trailer

1:11

Wie ist das 2.BUNDESLIGA ZU SPIELEN?

33:07

Wie ist das 2.BUNDESLIGA ZU SPIELEN?

Leeroy will's wissen!

Aufrufe 510 116

Kizo ft. Wac Toja - LUCKY PUNCH (prod. MØJI)

2:50

Kizo ft. Wac Toja - LUCKY PUNCH (prod. MØJI)

Kizo MyToSukces

Aufrufe 1 167 344

When you meet a jazz demon in medieval times

3:12

When you meet a jazz demon in medieval times

Daniel Thrasher

Aufrufe 425 028