jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)
HTML-код
- Опубликовано: 18 июн 2014
- Free RESTful API to use for practice!: rest.learncode.academy/
In this jQuery AJAX Tutorial for beginners, we're going to be adding new data to our backend server with the jQuery ajax post method. jQuery ajax post allows us to send data for the backend to save. When the backend is setup in a RESTful way, it will return our successful post along with an ID and any other information it created for us when it saved the information. We'll use this information to display our new post to our user.
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 #7: JQuery Ajax tutorial #1
• jQuery Ajax Tutorial #...
~-~~-~~~-~~-~
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
• Responsive Design Tuto...
~-~~-~~~-~~-~ 
Хобби
Thank you! This video is exactly what I was looking for, and the entire playlist has been great so far
You are by far the most helpful, straightforward resource for web development on RUclips--perhaps the whole internet, even. Thanks for the info.
These tutorials are so helpful! I had to dig through the comments to understand a couple concepts, but I have recreated this successfully :)
I have learned more about jQuery thru your videos than anywhere else so far. Thank you so much!!
Really great tutorial. it was 2 weeks i searched for this kinds of tutorial thank you Sir.
This guy got a talent for teaching. Like if you agree
Great videos! I have tried learning AJAX from a few other sites with little success. These videos taught me the basics in about 30 minutes. Nice!
Yeah, they're not super complicated...you just have to know where to start with them - for most devs, the hindrance is that they don't have access to a backend and don't want to code one themselves for test.
I really love the way the you say ha ha ha... :)
I really became your Fan.
Man you are amazing, you should teach web engineering in university ! Keep doing it like this !
Great work, like how you explain the working.
I like your energy!
Parabéns! Congratulations! Assistindo em 2018 e funcionando!
Thank you very much for the tutorial :) !!!
that is an awesome explanation.
This was helpful . Helped me in a project.
man you made it so easy!!! wow
Cooooool! I love jquery. Awesome!
good one, I can implement jquery now
Awesome tutorial!!
Great tutorial !!
Very helpful , Thank you !
it is very helpful, thank you
Is fantastic resource for beginners, thanks and look for React ;).
I want to buy u a drink for this tutorial :) great work ...keep it up (Y)
Good explanation, mate. :)
awesome tutorial .!!!1
Excellent article..thanks a lot :-)
I've done it and its working! Thank you for this great lesson!
How did you do that. I am getting undefined when I post to the json file. Pls help me
Jeylani Osman
post in all code so we could help you.
AMAZING !
thank you, nice explain
Thanks for this tutorial. What if the data are coming from a MySQL database? I have found tutorials on how to convert MySQL to JSON data using php. But what if we are trying to write back to the database? Can I use what you have shown in this tutorial?
This is pretty cool, do you have a video explaining how this order information is sent/received from the backend? Basically how the API writes and reads from the database?
Спасибо тебе большое!
Awesome
which video in the jQuery series deals with caching the variable data? I already learned jQuery but for some reason this flew over my head.
Very nice super
Do you have a tutorial for the api in node.js? Also, will I be able to build my own api after taking your new node.js course? I am thinking about checking it out.
I didn't know I need a backend program to save data, I thought I could save it in a json file, it spent me half day to figure out and another half to find out you got a backend program for using... Leaving this message to remind someone else about this: Don't try to save your data in json file, or you'll waste time haha!
Correction: Both, GET and POST are sending data to the server. There is no other way to call a server's ressource as to send data - to begin with. The difference between the two is in which way the data is sent. While GET sends data as a component of a URL, POST sends it via standard input (i.e. the data is not visible in the URL string).
I'm struggling to link the API and draw the info from the it to the html file. Advice?
when i post, i am getting undefined for both fields. no error message pop up. not sure what is wrong. i am using mamp to test.
i'm gettting this too!
5:47 the response i get is the json from orders, not the POST data that's being sent
the data being passed through the function is different from the data: order from the variable
Great videos dude! LOL I feel bad for the Hogan people. "Yes he's gonna use our....crap, oh man! :( " lol
What did you do your backend with?
Nice
i dont get it :/ the data here is the same as in GET? i mean this is the data you got back or the data you sent to the server ? also , correct me if im wrong here but you didnt just got information that was already on a server. you modified the data / JSON file and got back the information from the same file. unlike GET ,when you only ask whats already there. correct ?
Are you using any DB for this post call?
hey boss! i think im almost ready to call myself a jr dev. i need help though!
how do i learn how to create the api itself? secure it? i know the basics of the backend, but how can i make the both sides communicate and use logic from the back? creating the logic in the back??
im so excited but i have so many unanswered questions that I can't seem to find good learning material for :[
when you create the var order, who is who in name and name.val()?
name: undefined, drink: undefined, new elements don't added. but new added
and where is a server part? server must be write to the file?
server it's localhost
where is the backend code? How it is storing the new data???
In post success just call get method.. will work the same way.
How exactly can i define the response in the backend?
Are there tutorials on the backend as well? Wondering on how to setup the structure on the GET/POST on the backend.
same question
Hello!, thank you for the tutorials, they are great. I dont understand though that you dont use a json o php file, but a RESTful API...this one I dont understand well how it works, could you explain me about it please?
***** Sure. So in real life, you would use a url like:
/api/drinks/order/13 (get all drinks for order # 13)
A backend server is running in PHP, Ruby on Rails, Node.js, Java, etc.
That server gets that URL, fetches all the orders from the database and returns them in JSON.
Since we don't have a backend, an easy way to "fake" that GET request is to just get a .json file.
Now, that's very limited, since we don't have the ability to write to files with javascript in the browser, so it's only good for GET requests.
That's why I made rest.learncode.academy - to help you fake in a full backend to build your frontend code around.
Did you just make newOrder a variable on the fly?
From where I will get to learn the backend code for handling the request which are made in this video
Great cast! was wondering if maybe you could also cover the best methods in implementing popular jQuery plugins into your project etc?
Thanks! That would be good.
I can say my recommended way would be:
- use bower to install the plugin (if it exists as a bower package, unless, download manually)
- use grunt-usemin (github.com/yeoman/grunt-usemin) to build 2 JS files for deployment - one for all library/plugin code, one for application code
You can sort-of see this in action in the yeoman tutorial (YEOMAN TUTORIAL - Master Front-End Workflow with Yeoman, Grunt and Bower)
LearnCode.academy Yes watched the video still a little confused on the concept of minifying css and js and how bower and jquery plugins differ from the other approach and work together.Will have to do a little more research for sure.
Yeah, grunt is a lot to take in at first, because it can be used to do just one thing or 100 things.
Bower is the simplest component...it gives you a way to search and download popular plugins from the terminal. That's pretty much it.
The concept of minification is:
The browser will have to make 10 get requests (hit the server 10 times) to get all 10 javascript files on our page...this is a lot of server load as traffic grows. Grunt can concatenate all of your javascript files (basically paste them all end-to-end into one file). Now, your server gets one request and delivers one file. Grunt can also minify it to cut the file size in half or more. Now your page loads faster.
First, thank you for this. Some good learnings here. I'm getting 'undefined' while appending, but I'll try to figure it out.
If I'm understanding this, when we're 'adding an order', it's only updating the cache, not actually writing to the JSON file, correct? When I refresh, only the JSON is loading, not the added orders.
When you click the add order button you enter data and that data is shown. So when you refresh it no button has been clicked this time, that's why you can't see the order again. You should inspect element before and after clicking the button and check the ul tag. It's the html that get's updated. Also this data is stored in SQL server. Btw even i'm getting the same error "undefined" when i put an alert it shows "success" but it does not really have any object contained in it.
so what does php do? i thought that was the backend GET thingy.
I am wondering is the newOrder returned by the POST request?
Cool
I was so pissed off that you used the semi-colon on the order's object because I though I was the one wrong and that I had to relearn this new syntax for Ajax. and then you got the error, thank god
Question :
how is the object called 'newOrder' operating ?
Example is with json data. Can you please explain with xml pay load and xml response data.
People say that AJAX and jQuery are outdated! How would these results achieved without AJAX for example while using React or VUE ?
Did you install this backend team file or somthing? Because i cannot access to localhost:3000/api/orders..
Hi, would it be possible for some advice? I am currently working on a project and am wondering what my URL would be? I am runnig the client side via an http-server, and need it to post to my RESTful service which is on localhost with an endpoint called /insert. I am running my endpoint on localhost via node (so in console i write node api-sqlite.js). I use this to store the code to add data into the database. I am really confused as to what my URL would be. Would it be /insert or var url = 'localhost:3001/insert?callback=?';
Thanx a lot! It's clear what this all about) Just one note: delete this terrible noise at the beggining)))
when I click the button to post it will save the records in the database but when it appends the element it brings undefined, what am I doing wrong here :(
+Pyroo0 use the api that he provided. rest.learncode.academy/api/learncode/friends
+Pyroo0 try to use name.val() without $
Ken Aguilar Thank you for help! But i've got one question. Why it's work on api, but not work on json local file?
@@J4si3k1992 Probably you founf a solution for this challenge, but incase you didn't, here is a good place to start github.com/typicode/json-server . Just create fake REST API environment and use that for all operations in a local json file.
Pls show us how to do simple backend example in the locahost so us to understand complete application
Check out the node.js tutorials!
ruclips.net/video/pU9Q6oiQNd0/видео.html
+Jeylani Osman coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/
how can I do it if I have multiple checkboxes and radio buttons?
What's the difference between the $orders.append in GET and the one in POST?
What is that color scheme and font in sublime text ?
With the above fields name and drink i have to send file is it possible??
I just get the "Blocked loading mixed active content" message.
I dont get one thing, on refreshing page, why is the appended html still there?
I want to see api/order url, because my POST request payload dose not contain id like: {name: "adsf", drink: "adf"}, and it doesn't save new order to json file. POST Method is success, but not save new order in json file.
I'm getting this weird error when doing the POST with ajax to update the DB: POST 127.0.0.1:5500/jQuery/api/orders.JSON 405 (Method Not Allowed). Any advice?
Nissal I had this issue with the DELETE method. How did you solve it?
Nissal same bro,do u resolve it yet?if so,help me out plz.
Why do you need to append the sent data to the site? Why cant just ajax refresh the connection, and send back the data??
I seem to be getting the json data just fine, but I received a 404 error on click, even though it's the same file path. I set up an Express.js server for local host 3000 as well. Not sure what the problem is. I wish you would go into more detail on the back end api and json file. Thanks
I have a Tutorial for node.js here: Node.js tutorial for beginners 2014 - an introduction to Node.js with Express.js that might be able to get you started. I have some upcoming lessons that cover node in more detail. Basically, in order to ajax to your node server you eitner a) need to be running your JS on a page served by the server. i.e. localhost:3000/index.html or b) you need to enable CORS on your express.js server to allow any domain to access the API with javascript. Here's how to do that: enable-cors.org/server_expressjs.html
I hope that isn't too much detail for an answer. The backend does get a decent bit more involved sometimes.
a short question:
when ever you want a click on a button to execute a piece of code... couldnt u have used something like
$("#add-order").click(function (){
blah blah blah *code*
});
Wouldnt that be the same?
+Rasmus Dyhr Yes U can use that ,This method is a shortcut for:
.on(click,function()
{
Your blah blah blah code
});
if i use another url, method post is not allowed, i already use xampp, still not work.
This video just helped me so much and put me tremendously ahead of where I was even a few hours ago. I have some additional questions regarding something I'm working on. Do you have an email address I can contact?
It's not working for me.( Basically I just copied code from the video but it's not writing date in json file and give that variable undefined. What could be the reason? I checked some solution in stackoverflow, but neither of them work for me
+Anna Presnyakova Watch KUDVENKAT series. For asp, ajax, js, jquery.. just aewsome....
+Anna Presnyakova me as well. it's not writing into file. i already checked if i made some typo but everything seems fine to me and somehow it return undefined. please reply it you already figure it out.
may i see your code? Mail me: mohak1990@gmail.com
+Anna Presnyakova
Use the api that he provided. rest.learncode.academy/api/learncode/friends
+Anna Presnyakova same here I hope +LearnCode.academy has some idea about it pleaseeee!
Great Tutorials! But if I want to POST to a JSON file in my pc (without using your api), what I need?
The short answer: it can't be done without a backend like php, node.js, ruby on rails.
GETing a file is doable, but you really shouldn't store changing data in a file, it should be in a database.
Now, you CAN use a backend-as-a-service company like Parse, Backendless, Firebase...most of which have a free tier which has quite a lot of capability.
So, if I make a POST to a php file that writes the information I send in a JSON file, is a bad practice?
Yeah, I wouldn't recommend it. GETing a JSON file is usually used to temporarily mock in getting info from a database.
Now, if your goal is to learn JS and you just need SOMETHING on the backend to update it, writing to a JSON file is fine.
I'd install mysql on my machine or use a SQLite database file.
Is there a tutorial on how our mate set up this backend? It would be amazing to understand the structure of the other side of this coin! Maybe we could find out why Bobby likes water ;-)
learn PHP! you may need to learn mysql, JSON...
+Anh Kim or there are some api ( Google drive api to save files online, pastebin)
what about a token for the api ?
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"),
});
};
} ;
just a noob question what is the meaning of $ before the "ajax" ??? before , my code looks like this "jQuery.ajax and then I changed it to $.ajax and still it's working. thanks for the info BTW.
$.ajax would be the same as jQuery.ajax. It's just a shorthand thing for jQuery.
Is there a proper link to the code, cause the URL doesn't seem to exist anymore.
why I am having not url api/order found ?
Can anyone knows how to send 4mb size of the data object to back end?
LearnCode.academy why did you make a new variable newOrder?
hey everyone, pls my mustache.js isnt working, however the project works but once i include the and add the template output in the main.js everything dies......pls help
I do not understand the url you are using : /api/orders. Is orders directory or file like json . how the forward slash I mean directory structure. for me it does not fine the file I used api/orders.json GETworks but Post does not work
This is a mock of a common pattern, where /api is a backend that the backend developers manage for you. I have a tool to help you play around without creating a backend: rest.learncode.academy
I get an error when trying to post new data to the JSON file. Can someone help me?
i get a return of undefined values
Outstanding lesson !
One thing I really hate about JS is how so often you see nested functions 3 levels deep and endless closures. I just do not understand how these work. Do you have a lesson which explains how all this works ? Thanks !!
Hi! I tried following your tutorial and think I got the hang of it, I mean the list is populated when i POST. I am a complete newbie when it comes to ajax, I have learnt Html/css quite a bit but not so much javascript and jquery. My goal is to be able to understand how it all connects and maybe, in the future, be able to build a simple social media app.
The strange thing with my .json file is when I type in the url in the browser the added items is shown together with id:s, but the id:s is very complex like: 55793aa3f263ac0100e70a4f.. not the correct 0, 1, 2 and so on.. Do you know what I did wrong without looking at my code?
Thanks for a great channel!
//erik
Erik Sundqvist that's a normal id for a MongoDB database, which is what the ajax backend I built is on. MySQL databases, on the other hand, tend to start at 1 and go up from there...it all depends on the database, really.
LearnCode.academy Thank you for your reply! Now I know why ;)
How to create an api to store data in backend?
how to add date in this?