Same here! I will probably do it with jQuery in the future, but I don't want to use that method until I learn how it works and know what exactly my code does.
Because JQuery is merely a library and there are libraries coming out every month, at some point JQuery will lose it's place and are you gonna stick to a library for life instead of the language itself?
this is so much fuking better than other tutorials out there that GETs data from an arbitrary .txt file or some magical JSON file that pops up out of no where.
Very helpful. Thank you. To bring this up-to-date, it's better to use xhr.responseType to set the data format and then xhr.response instead of the older xhr.responseText.
Finally found someone who didnt used stupid jquery i dont mean to hate on people or the library but it can just die i dont even care about it, vanilla maybe takes longer to write but its easier to debugg and access.
hi,what if I want to determine what the button submits ,say I have 3 buttons with IDs fruit1,forwad and show ,when you click on fruit1 the infomation in show (an image and image name) must be put in the button with id "forwad" on the same page. I Tried this but can't get anything function myonclickfn(){ document.getElementById('fruit1').onclick=function(){ $.ajax({ type: "POST", url: $("#forwad"), data: $("#show"), }); }; } ;
Thank you very much. I can't understand how you decide the header name("Content-Type") and the value("application/x-www-form-urlencoded") in setRequestHeader() method.
How do I use this to pass a variable that already carries a value and not give the value on the xhr.send ? and instead of I'm displaying it to the value of an but I don't know how , any help is well appreciated
I've tried it and it works. Thank you so much. What materials or books did you read to be able to understand this yourself? And how long did it take you?
No problem, I didn't read any books. I just read examples online and look at the MDN documentation. As always with programming, you only learn if you actually use these tools regularly
outstanding - thank you. you don't need to use jquery if you were just going to use it for AJAX. this video walks through exactly how to use normal javascript to do AJAX. thank you!
The ajax returns the error - {"readyState":0,"responseText":"","status"=0,"statusText"="error"}. Guess it implies its unable to reach the PHP file? Any solution?
I'm still a bit confused. Where's the destination set in the code? Isn't the dom.php the source file we're sending? Where can I set the destination folder I wanna send the file to? Thx!
Is it the same process when we want to send mail, and how can we get feedback on whether the mail, was sent, or an error occurred? Do you have such a tutorial? By the way, this video is great, congratulations, keep it up.
I made a website that request 2 numbers from input and send them to the server and send the summary to the client but I got an error message "Undefined Index" what can I do?
message: Array . UserName: Array . Password: Array . First Name: Array . Middle Name: Array . Last Name: Array . i am having this problem how can fix it
Awesome! I love it how you use plain javascript instead of 'that' outdated library. A suggestion: could you make a video on how to include csrf tokens in the XMLHttpRequest header and how to avoid CORS errors? I was trying to send POST request to a rest api I quickly made with django rest framework but I'm having trouble circumventing csrf and cors protection.
Const is for constants, "variables" that do not have their value changed. His code will still work but if the value does not change it is much clearer to use a constant.
I'm getting a http code 404. Both javascript & php files are in the same directory (wordpress). Before form submission xht.open("get","test.php", true); fails to find the php file.
Submitting to a JSON file won't work, you need to submit to an endpoint on the server side. In the case of PHP, it needs to be a PHP file. Laravel uses routes
dcode Thanks for the response. The code is as follows - $.ajax({ url: 'xxx.000webhostapp.com/xxxxxx.php', //this link returns JSON output successfully from the Twitter API 1.1 user_timeline code method: 'GET', dataType:'JSON', success: function(data){ alert('Success'); }, error: function(error){ alert('Error'); //This is the result I get } });
Can you make another tutorial on XHR POST explaining how to send passwords/forms to PHP and PHP will send that to a SQL database(Optional) and talk about a little bit of security? Then also how to GET data from PHP. Almost like a one-page login system without page refresh. I, we really need this. There are no good videos on youtube about this. There are some, but not fully explained, used jQuery etc etc. Please.
Yes. A login page(or something like that). We'll give the credentials, Javascript will POST it(to PHP or whatever), then get a response from the server, tell us if the credentials are right. or login successfully. Typically when we submit a form, it redirects to another page(because of the action attribute) But in this way we can login in the same page without page refresh. We can preventDeafult action(submitting) with JS and send/receive information with JS. We stay at the same page. Messaging app or commenting works like this, even though these are not forms. Because this topic isn't about PHP, you can just show us the JS stuffs without much PHP explanation. You already have a video like that "Form Data (FormData) in Javascript (with AJAX)". Close enough! Thanks for replying. Your channel has a future I guess.
Whoa! How come I didn't noticed that video, That's why my mother used to say I can't see even though I have eyes. Thanks. Not just from me but also from the others who forgot to thank you.
Hey there, what you could do is serialize the array as JSON using the JSON.stringify method and then send it as the usual key-valye pair. Although on the receiving end you will need to parse the JSON string back into a native data structure. If using PHP, try json_decode
I have a web page with dynamic forms on it generated by php. But the script only selects the first form. How do I make it select the forms dynamically? Please help me.
I want to submit the forms dynamically with Ajax but when I send the Ajax request it submits the values of the first form on the page even if I click submit for the last form. How do I make Ajax choose the specific form I submitted and send the request for it. Thanks.
A Jasper If you're using AJAX then you should be able to specify what data you want to send with the request to the server - what you can do is get the value of each input element and send to through with the request
Ok let me explain well. I have a php webpage that loops out posts from my database and foreach post it also loops out a form. Now if I load the page and submit the form data for the second post looped out Ajax will send the data of the first post's form. Same for all the post's forms on the page. How do I make Ajax choose the data that belongs to each post form and submit it instead of only submitting the data of the first post form everytime I send the request.
I've also made a video on sending JSON in similar fashion, check it out below!
ruclips.net/video/mNrJDGfQGz0/видео.html
finally someone who does it without jquery, thanks a lot
No worries, I like to avoid jQuery in all my JavaScript tutorials
@@dcode-software How come?
Same here! I will probably do it with jQuery in the future, but I don't want to use that method until I learn how it works and know what exactly my code does.
soo true
Because JQuery is merely a library and there are libraries coming out every month, at some point JQuery will lose it's place and are you gonna stick to a library for life instead of the language itself?
Only you provide Ajax post request without using jquery. Thanks a lot...
No worries, in a lot of cases you don't need jQuery just to perform a HTTP Request 😁
@@dcode-software this is the best tutorial so far. me personally dont like jquery its like bootstrap vs css grid..
Thank you so much, this was very helpful. I was having trouble doing this, It's 4:00am and I was really struggling thank you so much.
I swear if this just helped me with y project, you got a subscriber
this is so much fuking better than other tutorials out there that GETs data from an arbitrary .txt file or some magical JSON file that pops up out of no where.
Haha no probs mate
Very helpful. Thank you. To bring this up-to-date, it's better to use xhr.responseType to set the data format and then xhr.response instead of the older xhr.responseText.
Could you tell me how to do this with node instead of php?
Finally found someone who didnt used stupid jquery
i dont mean to hate on people or the library but it can just die i dont even care about it, vanilla maybe takes longer to write but its easier to debugg and access.
thanks this helped me
No worries mate!
I've included this in all my playlist just to make sure I will not lose this tutorial :)
Glad to hear 😊
frickin light theme 😒
WTF!!! Horrible example for the use of XHMHttpRequest and demonstration of the "xhr.send" function syntax!!!
how to keep values in form after eror in validation and after no errors redirect
hi,what if I want to determine what the button submits ,say I have 3 buttons with IDs fruit1,forwad and show ,when you click on fruit1 the infomation in show (an image and image name) must be put in the button with id "forwad" on the same page.
I Tried this but can't get anything
function myonclickfn(){
document.getElementById('fruit1').onclick=function(){
$.ajax({
type: "POST",
url: $("#forwad"),
data: $("#show"),
});
};
} ;
Thank you very much. I can't understand how you decide the header name("Content-Type") and the value("application/x-www-form-urlencoded") in setRequestHeader() method.
How do I use this to pass a variable that already carries a value and not give the value on the xhr.send ? and instead of I'm displaying it to the value of an but I don't know how , any help is well appreciated
What if the php file was uploaded to another website will the post request work?
I've tried it and it works. Thank you so much. What materials or books did you read to be able to understand this yourself? And how long did it take you?
No problem, I didn't read any books. I just read examples online and look at the MDN documentation. As always with programming, you only learn if you actually use these tools regularly
I forgot the request header and I was wondering what's wrong. Now I Know why my data wasn't going anywhere thanks
Awesome video! You could be more specific also in showing how to send input value though!
Hey mate, thank you and yeah I'm still working on my presentation skills 😁
I’m grateful for what I got. So thanks brother
How did ur local host is able to handle requests. Do u have any http server setup on ur local machine?
Hi, I have a "405 Method Not Allowed" ANY HELP PLS??
Why don't you give the source code in description
Oh man, that is the best sounding keyboard on all of youtube!
Great video! But please use dark theme next time, this shiny white calcine my retina.
No worries and yeah if you check out my recent videos they all have a dark theme, most people prefer dark over light
Is xmlhttprequest is ajax?
thanks is very helpful
outstanding - thank you. you don't need to use jquery if you were just going to use it for AJAX. this video walks through exactly how to use normal javascript to do AJAX. thank you!
The ajax returns the error - {"readyState":0,"responseText":"","status"=0,"statusText"="error"}. Guess it implies its unable to reach the PHP file? Any solution?
405 Method not allowed, I followed exaxtly the same step. Anybody knows how fix that?
If you're using a built-in development web server via the code editor then you'll need to switch to an actual web server like Apache for example.
thank you
Not working for me :(
What if the php file was uploaded to another website will the post request work?
Everybody where saying jQuery was way easier than vanilla js but this video was so clear and easy to understand. Thanks!!
I'm still a bit confused. Where's the destination set in the code? Isn't the dom.php the source file we're sending? Where can I set the destination folder I wanna send the file to? Thx!
Is it the same process when we want to send mail, and how can we get feedback on whether the mail, was sent, or an error occurred? Do you have such a tutorial? By the way, this video is great, congratulations, keep it up.
Than q
I made a website that request 2 numbers from input and send them to the server and send the summary to the client but I got an error message "Undefined Index" what can I do?
how did you setup vscode for web development? what extensions are you using?
Great
Not bad
so my html shows status 200 with a green circle yet my PHP is receiving no data and $_POST is empty?
hello. Nice tutorial u got there. How do I send base64 without urlencoding?
message: Array .
UserName: Array .
Password: Array .
First Name: Array .
Middle Name: Array .
Last Name: Array .
i am having this problem how can fix it
do i have to create a php file??
Awesome! I love it how you use plain javascript instead of 'that' outdated library. A suggestion: could you make a video on how to include csrf tokens in the XMLHttpRequest header and how to avoid CORS errors? I was trying to send POST request to a rest api I quickly made with django rest framework but I'm having trouble circumventing csrf and cors protection.
can you do this with javascript and c++
OMG you explained this so well, I am using AJAX for the first time.... this really made a lot of sense! thanks.
I have seen an Ajax example in a web development book by Robin Nixon but instead he uses var, is there a particular reason you chose to use const?
Const is for constants, "variables" that do not have their value changed. His code will still work but if the value does not change it is much clearer to use a constant.
I'm getting a http code 404. Both javascript & php files are in the same directory (wordpress). Before form submission xht.open("get","test.php", true); fails to find the php file.
It looks to be something related to your routes or URL rewrite
Thank you very much, its been a great help :)
No worries at all mate!
Ur the man, Dom 😁
Easy, nice, planned, and clear explanation. Well done pro!
Simple and neat explanation , Thanks
Will it work if i do in json file instead of php
Submitting to a JSON file won't work, you need to submit to an endpoint on the server side. In the case of PHP, it needs to be a PHP file. Laravel uses routes
@@dcode-software ooh i see, thanks
Simple and understandable, thank you!
PHP worked perfectly. The folowing pure javascript + ajax request, returns the error function results -
$.ajax({
url: 'url' // URL of PHP file on pvt webserver which is successfully displaying JSON output,
method: 'GET',
dataType:'JSON',
success: function(data){
//success - elusive
},
error: function(error){
//failure - returns this code
}
});
Can you please send through the whole code?
dcode Thanks for the response. The code is as follows -
$.ajax({
url: 'xxx.000webhostapp.com/xxxxxx.php', //this link returns JSON output successfully from the Twitter API 1.1 user_timeline code
method: 'GET',
dataType:'JSON',
success: function(data){
alert('Success');
},
error: function(error){
alert('Error'); //This is the result I get
}
});
Can you make another tutorial on XHR POST explaining how to send passwords/forms to PHP and PHP will send that to a SQL database(Optional) and talk about a little bit of security? Then also how to GET data from PHP. Almost like a one-page login system without page refresh. I, we really need this. There are no good videos on youtube about this. There are some, but not fully explained, used jQuery etc etc. Please.
Thanks for the suggestion! I'd like to do PHP at some point, what do you mean by sending passwords/forms to a database? Do you mean a login page?
Yes. A login page(or something like that). We'll give the credentials, Javascript will POST it(to PHP or whatever), then get a response from the server, tell us if the credentials are right. or login successfully.
Typically when we submit a form, it redirects to another page(because of the action attribute) But in this way we can login in the same page without page refresh. We can preventDeafult action(submitting) with JS and send/receive information with JS. We stay at the same page.
Messaging app or commenting works like this, even though these are not forms.
Because this topic isn't about PHP, you can just show us the JS stuffs without much PHP explanation. You already have a video like that "Form Data (FormData) in Javascript (with AJAX)". Close enough!
Thanks for replying. Your channel has a future I guess.
ruclips.net/video/zvt8ff3d63Q/видео.html
I made a video similar to this topic, try this one mate
Whoa! How come I didn't noticed that video, That's why my mother used to say I can't see even though I have eyes.
Thanks. Not just from me but also from the others who forgot to thank you.
No problem, I hope it helped you 😁
Yes but is there a way to output a javascript variable to a text file using ajax?
Of course but the server side code will need to write to the text file
HELP! the xhr.send(); method doesn't work, it gives error" 405 method is not allowed" i am trying it on a localhost server
Are you using a webserver provided by one of your text editor plugins? If so, that is why. I recommend using something like XAMPP or WAMP as a server
@@dcode-software the problems was the php page that i was linking to, the php function had an error
hi nice tutorial, but how about sending an array data on it?
Hey there, what you could do is serialize the array as JSON using the JSON.stringify method and then send it as the usual key-valye pair. Although on the receiving end you will need to parse the JSON string back into a native data structure. If using PHP, try json_decode
oh okay, thank you. I'll try
thank !!!!!
Great video, but can you please explain how we send an array using the same method?
I've made a video on this, here it is: ruclips.net/video/ycmci-hiPfQ/видео.html
Just send an array instead of an object
Pls teach us how to coding a chat system!
That would be a great video idea 🙂
@@dcode-software yep, I'll waiting for it 💜
I have a web page with dynamic forms on it generated by php. But the script only selects the first form. How do I make it select the forms dynamically?
Please help me.
Hi, what do you mean when you say "the script only selects the first form"?
I want to submit the forms dynamically with Ajax but when I send the Ajax request it submits the values of the first form on the page even if I click submit for the last form. How do I make Ajax choose the specific form I submitted and send the request for it. Thanks.
A Jasper If you're using AJAX then you should be able to specify what data you want to send with the request to the server - what you can do is get the value of each input element and send to through with the request
Ok let me explain well.
I have a php webpage that loops out posts from my database and foreach post it also loops out a form.
Now if I load the page and submit the form data for the second post looped out Ajax will send the data of the first post's form. Same for all the post's forms on the page.
How do I make Ajax choose the data that belongs to each post form and submit it instead of only submitting the data of the first post form everytime I send the request.
Hey can you post the code to GitHub?
How to do the same thing with JSON?
Hey, I've got a video lined up for sending JSON via AJAX
Hey mate, I've made that video if you're still interested :)
ruclips.net/video/mNrJDGfQGz0/видео.html
why is he on light mode ????????😒
He switches to dark themes in future videos