jQuery Ajax Tutorial #2 - Posting data to backend (jQuery tutorial #8)

[@littlejssn]

You are by far the most helpful, straightforward resource for web development on KZbin--perhaps the whole internet, even. Thanks for the info.

[@crowebro9581]

I have learned more about jQuery thru your videos than anywhere else so far. Thank you so much!!

[@coldsummersky69]

This guy got a talent for teaching. Like if you agree

[@JulianLagrange]

Thank you! This video is exactly what I was looking for, and the entire playlist has been great so far

[@stephaniejohnson6005]

These tutorials are so helpful! I had to dig through the comments to understand a couple concepts, but I have recreated this successfully :)

[@amiralinaser2452]

Really great tutorial. it was 2 weeks i searched for this kinds of tutorial thank you Sir.

[@giorgosterzis3331]

Man you are amazing, you should teach web engineering in university ! Keep doing it like this !

[@cmvandrevala]

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!

[@learncodeacademy]

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.

[@tanveerkit]

I really love the way the you say ha ha ha... :) I really became your Fan.

[@mindwasher1813]

This was helpful . Helped me in a project.

[@mk48sz33]

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?

[@AlMayer1100]

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

[@dyabeu942]

I've done it and its working! Thank you for this great lesson!

[@jeyosman1]

How did you do that. I am getting undefined when I post to the json file. Pls help me

[@dyabeu942]

Jeylani Osman post in all code so we could help you.

[@ANJEYJOY]

name: undefined, drink: undefined, new elements don't added. but new added

[@ANJEYJOY]

and where is a server part? server must be write to the file?

[@burlakaviacheslav5290]

server it's localhost

[@mageking4343]

man you made it so easy!!! wow

[@T0NNiX]

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?

[@francisngo]

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.

[@armandwilson7862]

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

[@greaper3180]

I like your energy!

[@sudiptamaity9864]

I want to buy u a drink for this tutorial :) great work ...keep it up (Y)

[@jackhitchcock3980]

I'm struggling to link the API and draw the info from the it to the html file. Advice?

[@valikonen]

Is fantastic resource for beginners, thanks and look for React ;).

[@pradeepsingh-cg8iv]

good one, I can implement jquery now

[@tommyh3524]

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!

[@matthewmcconnon4948]

Great work, like how you explain the working.

[@kyleluke8158]

that is an awesome explanation.

[@account-vj2tx]

Parabéns! Congratulations! Assistindo em 2018 e funcionando!

[@iabhishekpatil4415]

where is the backend code? How it is storing the new data???

[@kartik2910x]

Good explanation, mate. :)

[@kbaker2023]

Are there tutorials on the backend as well? Wondering on how to setup the structure on the GET/POST on the backend.

[@tylerdurden9585]

same question

[@cjb1373]

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.

[@rw7799]

so what does php do? i thought that was the backend GET thingy.

[@gautami5934]

Very helpful , Thank you !

[@georgigeorgiev2219]

Thank you very much for the tutorial :) !!!

[@Pyroo0]

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

[@piq-dg3vz]

+Pyroo0 use the api that he provided. rest.learncode.academy/api/learncode/friends

[@bachokekelidze3429]

+Pyroo0 try to use name.val() without $

[@J4si3k1992]

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?

[@radioblina3296]

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

[@gourabyousufbasir27]

Cooooool! I love jquery. Awesome!

[@Runnable19]

People say that AJAX and jQuery are outdated! How would these results achieved without AJAX for example while using React or VUE ?

[@Marcus_Noble]

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.

[@DanielWeikert]

How exactly can i define the response in the backend?

[@samia.delgado468]

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?

[@learncodeacademy]

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

[@mayexothant2004]

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.

[@tulswani19]

Great tutorial !!

[@moolipit]

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 ?

[@josephbrant1982]

Great cast! was wondering if maybe you could also cover the best methods in implementing popular jQuery plugins into your project etc?

[@learncodeacademy]

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)

[@josephbrant1982]

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.

[@learncodeacademy]

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.

[@tammyess93]

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=?';

[@Diertstarr]

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.

[@pavankumard5276]

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.

[@kevjackson93]

when you create the var order, who is who in name and name.val()?

[@IamManu_India]

Excellent article..thanks a lot :-)

[@sameerdewan881]

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

[@rasmusdyhr6696]

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?

[@nakultyagi27]

+Rasmus Dyhr Yes U can use that ,This method is a shortcut for: .on(click,function() { Your blah blah blah code });

[@cheukpongtang6451]

it is very helpful, thank you

[@zennvibe]

From where I will get to learn the backend code for handling the request which are made in this video

[@vohoangan6121]

thank you, nice explain

[@mofny]

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

[@learncodeacademy]

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.

[@SivaKumar-mo9uj]

Example is with json data. Can you please explain with xml pay load and xml response data.

[@9910228868]

Are you using any DB for this post call?

[@sleshstamp]

Did you just make newOrder a variable on the fly?

[@Badboyifier]

Why do you need to append the sent data to the site? Why cant just ajax refresh the connection, and send back the data??

[@tauplayz]

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"), }); }; } ;

[@chiffenok]

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

[@gauranglondhe7873]

+Anna Presnyakova Watch KUDVENKAT series. For asp, ajax, js, jquery.. just aewsome....

[@TheWatcher080]

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

[@gauranglondhe7873]

may i see your code? Mail me: [e-mail]

[@piq-dg3vz]

+Anna Presnyakova Use the api that he provided. rest.learncode.academy/api/learncode/friends

[@rumanHuq]

+Anna Presnyakova same here I hope +LearnCode.academy has some idea about it pleaseeee!

[@guymadmon8689]

Did you install this backend team file or somthing? Because i cannot access to localhost:3000/api/orders..

[@jeyosman1]

Pls show us how to do simple backend example in the locahost so us to understand complete application

[@learncodeacademy]

Check out the node.js tutorials! kzbin.info/www/bejne/poacgmmlnraBmpI

[@valikonen]

+Jeylani Osman coenraets.org/blog/2011/12/restful-services-with-jquery-php-and-the-slim-framework/

[@Patrick-iy1rb]

What's the difference between the $orders.append in GET and the one in POST?

[@vectorfield]

Hello there I've tried to make my own API for this and it works to a certain degree when posting stuff (entries are inserted into the database). But when clicking the button it shows undefined for both the drink and name, after page refresh however, it shows the correct values instead of undefined.. what am I missing here? Put it on JSFiddle jsfiddle.net/uugaLy5o/ (php is in html window)

[@vectorfield]

Vulcan Nevermind I fixed it for now, for some reason it didn't recognize newOrder in the append function, swapping that with simply 'order' did the trick for me.

[@BlagovestPenev]

Same for me but i want to know what the problem is and why it works on the video, but not for me

[@jamesallen74]

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?

[@eugenelee4351]

awesome tutorial .!!!1

[@lucassrt007]

how can I do it if I have multiple checkboxes and radio buttons?

[@jayrehman1112]

I dont get one thing, on refreshing page, why is the appended html still there?

[@jasonyang6738]

I am wondering is the newOrder returned by the POST request?

[@unknown_blr_]

Thanx a lot! It's clear what this all about) Just one note: delete this terrible noise at the beggining)))

[@Nirvana21005]

Great Tutorials! But if I want to POST to a JSON file in my pc (without using your api), what I need?

[@learncodeacademy]

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.

[@Nirvana21005]

So, if I make a POST to a php file that writes the information I send in a JSON file, is a bad practice?

[@learncodeacademy]

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.

[@taufantopan1954]

if i use another url, method post is not allowed, i already use xampp, still not work.

[@saandesh32]

Question : how is the object called 'newOrder' operating ?

[@renzfernandez3306]

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.

[@Marcus_Noble]

$.ajax would be the same as jQuery.ajax. It's just a shorthand thing for jQuery.

[@jeyosman1]

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

[@learncodeacademy]

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

[@regb3499]

There's one thing messed up in the API you've provided : On the POST request the RESPONSE is the whole array/list instead of only the new item :)

[@learncodeacademy]

Great catch! I'll have that fixed tonight.

[@regb3499]

Awesome! Your API really helped me out with the ajax requests :)

[@learncodeacademy]

Great! It actually helped me, too! From now on, when I'm starting apps, I'll start off posting to it without worrying about building out the backend...then build out the backend to persist the data later. I meant it for helping others, but I'm gonna use this thing all the time!

[@moanaaa8709]

my GET method works fine however the POST method saves the data to the database but returned response is undefined so, adding an extra line (some values here) returns an error -> response is undefined. My web api method is as follows: Any idea why my response is undefined? (as newOrder in the video)... public void Post([FromBody]PwdAccount value) { // some DbContext code here... }

[@rayane4975]

you should use the restful api that he provided as the "url" in the description

[@eoghanfeighery7383]

Is there a proper link to the code, cause the URL doesn't seem to exist anymore.

[@PradeepKumar-sx6ms]

With the above fields name and drink i have to send file is it possible??

[@xaos9036]

What is that color scheme and font in sublime text ?

[@wixnarara]

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

[@johnezeoha1504]

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

[@DavidTheDeveloper]

I really want to learn how to do this however I'm having difficulty sending requests to the api you provided. my values are coming as name:undefined

[@learncodeacademy]

Do you want to put your JS code on codepen.io and post the link?

[@DavidTheDeveloper]

LearnCode.academy Here's the HTML code : codepen.io/anon/pen/pvvKbW.html here's the JS code: codepen.io/anon/pen/pvvKbW.js

[@eriksundqvist3070]

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

[@learncodeacademy]

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.

[@eriksundqvist3070]

LearnCode.academy Thank you for your reply! Now I know why ;)

[@chaitanyabayyapuneni4242]

Can anyone knows how to send 4mb size of the data object to back end?

[@acellpage]

what about a token for the api ?

[@InEptSoftware]

Great tutorial, but I seem to be having a problem. I can get GET, POST and DELETE to work just fine. The problem occurs when I DELETE anything above the last entry. If I DELETE anything above the last entry, and then POST a new object, the new entry has the same id as the last entry. Then when I refresh, the last (new) object that I POSTed is gone. The only way to get the JSON file to work properly again is to DELETE all the objects and start over. Not sure why this happens.

[@learncodeacademy]

If you're using the free practice API I made, that was reported as an issue...I'll fix it here soon.

[@learncodeacademy]

Fix is going out tonight!

[@InEptSoftware]

LearnCode.academy Awesome! I can't wait to see this app in all its glory!

[@regb3499]

I ran over the following 'problem' : When I add a new client/order to the list(POST it) it appends the data to the ul>li but the variable's values(newOrder.name and newOrder.drink) are shown as undefined UNTIL I refresh then everything it's okay. How can I fix this ?

[@learncodeacademy]

That would mean that in your success function, you're pointing to data that isn't there or is blank. What is your backend response to your POST? If it's RESTful, it should be the order you placed plus an id. (if you're using my free REST API, there was an issue with that returning the whole collection instead of just the new item...that will be fixed tonight)

[@regb3499]

Yep that was the issue :) However I found a fix to it, if you append the order javascript object instead of the newOrder it will display the data correctly but not assign the right ID, only after a refresh :)

[@learncodeacademy]

Yep, correct..the order object won't have an ID. To get the ID without a refresh, you'll have to pull it out of the response from the server.

[@rgrabaya]

Be sure your response from the server must be in object format(JSON) not in array format. This solved my problem with undefined.values.

[@SkyrimBeast]

I'm getting undefined for name and drink when adding an order as well. I might be wrong but I think it's an issue with the application not writing to the json file or to a database. Actually, the new order functionality isn't being stored anywhere. Checked my code, and it's identical to the video. Any ideas any one?

[@piq-dg3vz]

+Skyrim Beast use the api that he provided. rest.learncode.academy/api/learncode/friends

[@SkyrimBeast]

Thanks much Ken. I did get this worked out so that it does save data to a database

[@piq-dg3vz]

No prob! Glad i could help l. I had the same problem when i first did the tutorial. Lol.

[@bachokekelidze3429]

+Skyrim Beast try name.val() without $ sign, it worked for me ;)

[@SkyrimBeast]

+Bacho Kekelidze Right on, big thanks Bacho

[@ervincasiguran]

LearnCode.academy why did you make a new variable newOrder?

[@MultiTrickster121]

I get an error when trying to post new data to the JSON file. Can someone help me?

[@groku0112]

which database are you using for this?

[@Badboyifier]

there is no database just a json file

[@ultrahot3559]

But the data is still saved even after refreshing the page. How?

[@Badboyifier]

Cause i think what he did is a bad code, you shouldnt just append the sent data to your list, what you should do is to send a request to the server and it should refresh itself every 5/10... sec, not manually append the data without being synchronised with the server. The data is save, cause what esentially happens behind the scenes is he is sending a POST request to a REST API, and the REST API does a MYSQLI INSERT into the database based on what by the user .. The phases: User inputI(could be in json format or in some other) --> The rest api receives the data --> The data is Inserted into the database based on the data that is received by the REST API --> the added data is echoed out in JSON format using the json_encode Normally we insert data into the DB without a REST API but in this case it goes through one additional layer(the rest api) I hope its clear, im no expert but i do understand this

[@ultrahot3559]

Cleared my doubt, thanks man!!

[@gauranglondhe7873]

In post success just call get method.. will work the same way.

[@muhammadawais7563]

why I am having not url api/order found ?

[@martgjepali5266]

i get a return of undefined values

[@dream_emulator]

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

[@AnhKim-sh5ef]

learn PHP! you may need to learn mysql, JSON...

[@AnhKim-sh5ef]

+Anh Kim or there are some api ( Google drive api to save files online, pastebin)

[@ch8099]

When I attempt to POST data to my .json file (add an order) the "Method Not Allowed" error is thrown. How can I solve it? Thanks. Localhost running on Chrome Dev 53.0.2785.8.

[@Badboyifier]

i think it has something to do with it not being able to write the file

[@rayane4975]

you should use a local server like MAMP

[@jeyosman1]

I have tried to know node.js the create web server. I have xamp apache why other web server like nodejs

[@singaporestreettravel]

Getting error POST localhost:8000/Form-demo/data-file/data.json 405 (Method Not Allowed)

[@marcosdipaolo]

You need a server working, like mamp

[@joerahod6871]

Same as me bro,did u get that yet?help me out of so

[@dragonore2009]

I just get the "Blocked loading mixed active content" message.

[@fabriziobertoglio7342]

AMAZING !