2: How to load in data from a server using AJAX - Learn AJAX programming

Поделиться
HTML-код
  • Опубликовано: 4 окт 2024
  • How to load in data from a server using AJAX - Learn AJAX programming. In this lesson we will learn how to get content from other files on our server, and insert it into our web page without needing to refresh the browser.
    Learn how to install a local server here: • 2: Installing A Local ...
    --
    mmtuts is a RUclips channel that focuses on teaching beginner and advanced courses in various multimedia related skills.
    We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs.
    PHP for beginners is a how to series that teaches the PHP coding language to people who are just starting out learning programming. The course teaches how PHP scripting can be made easy and teaches how to build many apps such as a login system, a comment section, how to upload images, how to create users in a website, and much more. Creating dynamic websites with PHP is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners.
    If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.

Комментарии • 163

  • @dhaferharrathi
    @dhaferharrathi 7 лет назад +154

    dude if you keep making such great videos im gonna Stop going to university :D

    • @Dani_Krossing
      @Dani_Krossing  7 лет назад +8

      Hehe thanks :)

    • @MajorCB211
      @MajorCB211 6 лет назад +1

      yes they're brilliant! i love how you make them sooo simple as lots of tutorials expect you to know certain things beforehand and this slows down learning. have you thought about doing some game development tutorials?

    • @tarikmanoar
      @tarikmanoar 5 лет назад +2

      *-don't do that bro-*

    • @sangambk6053
      @sangambk6053 5 лет назад +5

      University is useless.

    • @tarikmanoar
      @tarikmanoar 5 лет назад

      @@sangambk6053 haha

  • @kellenwesley9062
    @kellenwesley9062 5 лет назад +2

    I would have to say this guys videos have been one of the greatest resources I have ever found. Dude is literally teaching me to code.

  • @alexmathai6245
    @alexmathai6245 7 лет назад +11

    A beautiful Video. The best I have seen for ajax. Please keep on teaching like this. People like you make the difference for students like us

  • @KpopDriod
    @KpopDriod 7 лет назад +37

    This is better than my university

    • @vanthuanluong9398
      @vanthuanluong9398 5 лет назад +1

      your university teaches this?

    • @nikoletakoleva7365
      @nikoletakoleva7365 4 года назад

      A fellow BTS fan, I see :) Wouldn't disagree about the video, I wish my teachers explained like this.

  • @floydapungan5853
    @floydapungan5853 6 лет назад +11

    Thank you dude! I've learned about web development because of you and got a job!!!

  • @dom7207
    @dom7207 7 лет назад

    Thanks for making this!! Honestly im paying A LOT of money to attend a bootcamp who like didn't go into detail with this..at all. no videos.. just long pages of text. I said what the heck... came here, got a much fuller grasp of AJAX in 12 minutes. Thanks.

  • @yahno3
    @yahno3 3 года назад +1

    Btw, I learned PHP from you last 2019, then I stopped. Still know how to but right now I'm going to learn Ajax from you. Thank you for that. :)

  • @jakubwozniak3089
    @jakubwozniak3089 9 месяцев назад

    Thank you. That Facebook chat example was perfect for explaining AJAX.
    Now it makes sense

  • @CodeWithBehram7497
    @CodeWithBehram7497 3 года назад +1

    Great teaching easy understandable words like bro, u made ajax the easyest for me love u bro....

  • @jeromesurio467
    @jeromesurio467 4 года назад

    I made a e-commerce system using your tutorial. thanks dude

  • @idHawk
    @idHawk 5 лет назад

    this is the best AJAX tutorial in RUclips!

  • @donnguyen5164
    @donnguyen5164 6 лет назад +2

    Very nice explanations. I definitely feel like you have a strong grasp on the subject matter. I enjoyed following along as I typed in the code on another computer. Thanks for the video!

  • @rohitgulati2500
    @rohitgulati2500 6 лет назад +1

    i changed data.txt to result.php and it displayed the data from database which i programmed in my result.php page.. whoa it worked..!! thanks bro.. (y)

  • @joelnjoroge7202
    @joelnjoroge7202 3 года назад

    Thanks a lot Dan.
    I had forgotten the # on the button, spent a lot of time wondering why it was all not working, but thanks GOD I noticed

  • @youneskasdi
    @youneskasdi 6 лет назад +1

    Your videos are awesome simple explanation and easy to understand by everyone please keep making videos

  • @OnyeStephen
    @OnyeStephen Год назад

    This video still saving life in 2023, please do you have a platform where you sell completed courses with actual projects for OOP php projects

  • @wundergalley114
    @wundergalley114 5 лет назад +5

    If only university professors explained things like this.

  • @we-are-electric1445
    @we-are-electric1445 3 года назад

    Great couple of videos on AJAX. Very easy to understand.

  • @adv.marian0525
    @adv.marian0525 4 года назад +1

    Good job! You are almost at my level skill

    • @tmst2199
      @tmst2199 Год назад

      I bet you're very smart, little boy!

  • @CJ-dm3ut
    @CJ-dm3ut 5 лет назад +1

    This is a nice example. What if I am trying to load data from a specific column of a database table?

  • @ingesoft2009
    @ingesoft2009 6 лет назад +14

    Watching this video makes me more valuable to my employer(s) so I can ask for more econonomical compensation for my skills.. :) Can I make you a donation?

  • @surinfarmwest6645
    @surinfarmwest6645 7 лет назад

    Another 'easy to understand' tutorial, thanks Daniel!

  • @cmonbrainy
    @cmonbrainy 7 лет назад +3

    dude...make some videos for JSON....your videos are amzing...

  • @caicu4865
    @caicu4865 5 лет назад +1

    Very high quality content sir, a million thanks and wish you well!

  • @yahno3
    @yahno3 3 года назад

    Thanks bro! Helps a lot, you made it look easy!

  • @Amit-mk5tx
    @Amit-mk5tx Год назад

    very good explanation ,

  • @mek059
    @mek059 6 лет назад +1

    Wow you explain very well. Keep it up!

  • @channeling294
    @channeling294 4 года назад +2

    I cant download the files

  • @rylni2448
    @rylni2448 4 года назад

    You deserve more subscribers

  • @businessbankadmin6004
    @businessbankadmin6004 6 лет назад

    i am you student from Uganda thank you

  • @luisg.sandoval2046
    @luisg.sandoval2046 7 лет назад +3

    Great vids, but this one is not working anymore on Google Chrome, or explorer, or edge, only works on Firefox

  • @alhafiz3d
    @alhafiz3d 4 года назад

    Mmtuts University of RUclips

  • @anisangeethasabastinsamraj614
    @anisangeethasabastinsamraj614 2 года назад

    Thank you!

  • @bobosa199592
    @bobosa199592 5 лет назад +3

    i got this error after adding the second parameter in the load functon: Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
    please help!

  • @menakask6050
    @menakask6050 3 года назад

    yeah its working perfect...

  • @javedahmed5949
    @javedahmed5949 6 лет назад

    first ever best tutorial thanks

  • @Hasan10474
    @Hasan10474 4 года назад

    very good broh!just loved this vedio

  • @Akash-jp4tm
    @Akash-jp4tm 6 лет назад

    Lots of love for you broo really appreciate your work

  • @Lukas7360
    @Lukas7360 4 года назад

    Thanks, I'm trying to make my own web page with memes (inspired by 9gag) and I want to add a comment section and upvote/downvote system of some sort. This seems like a good tutorial on how to do it.

  • @yousseftazit8477
    @yousseftazit8477 4 года назад

    Thank you so much, you're just amazing

  • @mek059
    @mek059 6 лет назад +1

    The alert callback showed before the Ajax completed
    (in the middle)

  • @tarikmanoar
    @tarikmanoar 5 лет назад +1

    *I have a Problem*
    _(index):32 Uncaught TypeError: $(...).load is not a function
    at HTMLButtonElement. ((index):32)
    at HTMLButtonElement.dispatch (jquery-3.2.1.slim.min.js:3)
    at HTMLButtonElement.q.handle (jquery-3.2.1.slim.min.js:3)
    (anonymous) @ (index):32
    dispatch @ jquery-3.2.1.slim.min.js:3
    q.handle @ jquery-3.2.1.slim.min.js:3_
    How can I solve it?

  • @ravenvoxx
    @ravenvoxx 6 лет назад

    very good explaination. thanks a lot

  • @devin4092
    @devin4092 8 месяцев назад

    Hey Dani,
    Can you show how to insert data into database with ajax so page doesn't refresh?

  • @RSTao77432
    @RSTao77432 5 лет назад +1

    is this jQuery classed as inline scripts?

  • @cr4zyd4n666
    @cr4zyd4n666 7 лет назад +2

    When I click the button I get an error in the chrome console saying
    Failed to load file:///C:/xampp/htdocs/data.txt: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    I dont understand how this is a cross origin request as both my index page and the data I want to load in are both in the same folder which is the htdocs folder (I am using XAMPP)
    Please help!

  • @obentabiayuk4780
    @obentabiayuk4780 5 лет назад +1

    Thanks but please am getting this error after doing everything you did:
    Access to XMLHttpRequest at 'file:///opt/lampp/htdocs/AjaxProject/sample.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    please help

  • @esantix
    @esantix 3 года назад

    Thanks!

  • @giovadith
    @giovadith 6 лет назад

    Nice Tutorial sir, thank you very much

  • @MrGigi-dz9cv
    @MrGigi-dz9cv 5 лет назад +1

    H. Is there a way to get server data as a js variabile, that can be used in functions with ajax, outside the function ? Thanks.

    • @MrGigi-dz9cv
      @MrGigi-dz9cv 5 лет назад +1

      I need the data, for a form validation script, so i need a value returned.

  • @ATSPARIStransfers
    @ATSPARIStransfers 7 лет назад

    awesome video ! really good. well explained, everything's good !

  • @malikumairmukhtar
    @malikumairmukhtar 7 лет назад +1

    0:22 Dear Mr. Danial, AJAX can do work off-the-server as well. Because I have worked with AJAX without a localhost server in simple HTML file not PHP. There could be some browser problem because sometime Chrome does not support AJAX without Server but Firefox runs the AJAX queries easily without a server. Please search and make it correct. I have real example that AJAX can work without server but (in my case) only on Firefox.

    • @tmst2199
      @tmst2199 Год назад

      I'm sitting here trying to run it directly from the filesystem in Chromium and having it silently fail. Not even a word from the developer console. I hate the fucking browser.

  • @J90JAM
    @J90JAM 2 года назад

    Would you just use Async/Await these days or is my thinking wrong?

  • @geraldfoushee
    @geraldfoushee 6 лет назад +4

    Daniel... Today I feel a bit overwhelmed... Why is because the more I study the more names I hear... First it was HTML was all you needed... Then we learned that while that was true... The site looked crappy without CSS... Then we were excited when we learned to change background color, font color and size... Use a float and div.... Then we heard about the need for JavaScript if we wanted a job. After all, who can get a job with only HTML and CSS.... So we learned the basics of vanilla JS only to find out that we now need jquery.... Now we hear about the portfolio and we now need some backend to show we are able to do front end.... So we look into building a e commerce section only to find out we now need pho and my SQL..... Ahhhhhhhhhhhhhhhhhh!
    😂 lol
    So basically we need a video that touches on what these things do and a logical path to get some front and back end..
    So what are all these things used for/good for... And in what order do we try to learn them and we need more projects I think
    ..
    Not immediately but just throwing ideas out to you.
    You have done an amazing job... And we are proud to call ourselves your students..
    O and every time we think we know something like even HTML... We learn we don't know as much as we thought.... Variables in CSS.... Wow.... That's crazy..... This is a never ending journey I guess.

  • @jonathanguerrero4994
    @jonathanguerrero4994 7 лет назад

    hi, i love your videos, do you have an i idea how long this series on AJAX will be?

  • @bhavinkapadiya1503
    @bhavinkapadiya1503 4 года назад +1

    Lesson files link is expired!!

  • @rohantongle155
    @rohantongle155 5 лет назад +1

    how to fetch realtime data from terminal and show it in browser in real time someone please help me thanks in advance.

  • @issamtaki7302
    @issamtaki7302 6 лет назад

    Hey first i want to thank you for this explanation, and i have just 1 question for you and i hope you answer me, the second data wish we send with the method load and $.post also, can we save it in our text file without php ?

  • @armastro99
    @armastro99 7 лет назад

    Great work as always!

  • @Benjitob
    @Benjitob Год назад

    Hi dani
    I Saw that you was using jquery, but Can i also Code Ajax with JavaScript, or do i need to use jquery

  • @klintedward8683
    @klintedward8683 6 лет назад +2

    Hi. Good day im running a script of a setInterval function that loads a php file that queries to the server for every 2 seconds. and it returns a warning about web sockets protocol. but the query works fine and functional. Is it ok if i only hide all the warnings (eg. display_error: off in php.ini to hide all display errors)? i only use time interval for loading a notification and it used for a multiple client.
    Thank you.

  • @vinodsahare3080
    @vinodsahare3080 6 лет назад

    nice tutorial

  • @stephenokoduwa
    @stephenokoduwa 4 года назад +1

    hey Dani Krossing,
    I want to know how to use AJAX when I want to submit a form to a PHP file, insert data into mysql database, and select all the data from database.
    In addition, while I have multiple forms made (comment, username, submit, etc) under each data selected from mysql database, I want to fill out each individual forms and store different results back into the database with Jquery and AJAX without refreshing the page kind of like the same system as this comment section on youtube. Any help would be nice.

    • @Andyyy7666
      @Andyyy7666 2 года назад

      If you found out how to do this now after a year please let me know.

    • @stephenokoduwa
      @stephenokoduwa 2 года назад

      @@Andyyy7666 I figured out how to do it since I last sent that comment. However, I suppose the best way to explain this is if I send a video because it is quite difficult to explain in this comment. It nice to see after a year someone finally replying even though it not a solution😅

    • @Andyyy7666
      @Andyyy7666 2 года назад +1

      @@stephenokoduwa for the last 5 hours I’ve been sitting here and I actually just made an api and it works grate.

  • @alexyap3659
    @alexyap3659 7 лет назад

    inside the callback function, would it be possible to run a function to hide a preloader once the ajax call is finished? would that be advisable or is there a better way?

  • @gowthams8340
    @gowthams8340 6 лет назад

    Amazing Channel !! But Can you create any real time projects using UI development(html,css,php,js,sql) ??????

  • @ananthub1630
    @ananthub1630 5 лет назад

    awsm work bro

  • @gelogelo3191
    @gelogelo3191 11 месяцев назад

    hi im just asking how do i run AJAX do i need xampp .do you have a tutorial on how to do it

  • @LonelyJester
    @LonelyJester 4 года назад

    so the second parameter in the load method updates the txt file with the information written?🤔 Im learning about ajax now so this seems interesting.

  • @hamahawlery7194
    @hamahawlery7194 4 года назад

    I love you !

  • @yifftator2335
    @yifftator2335 4 года назад

    Do I have to download outside sources or can I make my own custom JQuery codes for Ajax?

  • @rinositanggang2632
    @rinositanggang2632 5 месяцев назад

    I can only display alerts, but not change the text in the div.

  • @plachetnice3496
    @plachetnice3496 3 года назад

    thank u

  • @dastgirakhtar9782
    @dastgirakhtar9782 6 лет назад +1

    download link is not working.

  • @djsarfaraz2148
    @djsarfaraz2148 6 лет назад

    Ajax is a good program to learn

  • @KL4NNNN
    @KL4NNNN 4 года назад

    why the function doesn't work (the p doesn't change to the data.txt content) when I add the second parameter? The alert function is still executed but the p doesn't change if I add the second parameter

  • @grzegorzszymanik4154
    @grzegorzszymanik4154 3 года назад

    I'm a bit confused. I've tried loading the txt file but it didn't work. I thought it's something wrong with my code but it's exactly the same. To make sure that jquery works, I've changed load() to text() and inserted some text. It worked. So my problem is with loading the file. My code is exactly the same like in a video. File data.txt is located in a root directory. Any idea what went wrong?

  • @tallinmehta1972
    @tallinmehta1972 5 лет назад

    Do we need t add some extra code when we need to use Ajax?

  • @jkrw3540
    @jkrw3540 5 лет назад +2

    what happened to name and second name? Where did they go?

  • @yohenson
    @yohenson 2 года назад

    can you use ajax on google results webpage-not your own webpage? or is it protected?
    just to get text results

  • @vishalnand1393
    @vishalnand1393 7 лет назад

    Which IDU you used to develop this sample page?

  • @johnrieltaladtad1370
    @johnrieltaladtad1370 5 лет назад

    can you send here the sql you use in filling the tables? i only practice in internet cafe so it takes a lot of time for me to set up all things i need to practice the ajax,

  • @advocatesudarshanbijinepal7739
    @advocatesudarshanbijinepal7739 7 лет назад

    excellent you are

  • @mstfarhana6363
    @mstfarhana6363 6 лет назад

    Hello Sir ,it will be a lot help if you could show a crud Ajax mysqli php with a active /deactive button

  • @wassim5622
    @wassim5622 6 лет назад

    GREAT TUT KEEP IT UUUUP ❤

  • @guitC
    @guitC 3 года назад

    Hello, is it possible to send javascript variable to MySQL? How can I do it? I would like to send javascript game score to database and print it on the same page in div results.

  • @Zetek
    @Zetek 5 месяцев назад

    IT doesnt wiek i included the jQuery and adter Burton clock IT does nothing. Can Antoine help?

  • @Paltibenlaish
    @Paltibenlaish 7 лет назад +7

    great,
    but you should show this lessons without jquery!
    only javascript

    • @curtturdle5661
      @curtturdle5661 7 лет назад

      nooooooooo

    • @cedrictwillie1892
      @cedrictwillie1892 7 лет назад +3

      Why use Javascript instead of jQuery when Javascript's use of AJAX is not consistent across different browsers. Don't code harder, code smarter Paltibenlaish. I only wish he used PDO instead of Mysqli for the same reasons. But he is a great help and teacher!

  • @g43s
    @g43s 6 лет назад

    if i only had knew about Ajax a few weeks ago i could have passed my computer science class :(

  • @thinh1760
    @thinh1760 6 лет назад

    thank you...

  • @zuberkhan7889
    @zuberkhan7889 6 лет назад

    @mmtuts Nice Video but i am confuse with second parameter in load() , can anyone explain ?

  • @frerikscas
    @frerikscas 4 года назад

    do you have a new link for the lesson files?

  • @programmingprogrammer1947
    @programmingprogrammer1947 7 лет назад +2

    Do you really need Jquery to do Ajax???

    • @alexyap3659
      @alexyap3659 7 лет назад +1

      no, u can do it with javascript but it's easier with jquery, the drawback there i believe is if say for example you're only working on a small project and you have to load in the entire jquery library just for that single ajax call then in those cases it is better to use javascript instead to save memory i think, correct if i'm wrong i'm still pretty new but that is what i've read on stackoverflow at least

  • @georgiatanasov4273
    @georgiatanasov4273 6 лет назад

    How can we reference to this 'data' which you are intializing?

  • @alexmathai6245
    @alexmathai6245 7 лет назад

    I have been trying to use this programme for a django powered project. Although my call back function works, the document that needs to be downloaded is not being downloaded , so I am getting an alert due to the alert function but no additonal information. Does anyone have any ideas?

  • @mvaldesme
    @mvaldesme 7 лет назад

    excellent!

  • @nahiyanalamgir7614
    @nahiyanalamgir7614 4 года назад

    Good tutorial, but why unnecessarily use jQuery for this? The default way of doing it is simple enough, and people want to learn AJAX here.

  • @pallavigupta321
    @pallavigupta321 6 лет назад

    hello even i added the cdn on click of button it is not working what should i do

  • @123Usch
    @123Usch 7 лет назад +1

    At 9:55 i do not get the point of including the name parts. What functions do they serve?

    • @Dani_Krossing
      @Dani_Krossing  7 лет назад +1

      Let's take an example where I have a PHP file that gets a users information from a database. Then in order to get the correct user from the DB, I would need to tell the PHP file what the users username is (or some other information on the user). And we do that by including the information/data where we create the names :)

    • @123Usch
      @123Usch 7 лет назад

      Ohhhh ok thanks for explaining it to me.

  • @Lofausto66
    @Lofausto66 6 лет назад

    dude could you submit the exercise files once again? Many thanks

  • @DanielWeikert
    @DanielWeikert 7 лет назад

    Is the load possible in chrome? I receive an Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https error. Edit ok got it. Works only on server