Flask & the Fetch API (AJAX?) - Python on the web - Learning Flask Series Pt. 10
HTML-код
- Опубликовано: 10 сен 2024
- In this episode, you'll learn how to use the Fetch API to make asynchronous requests from the client to your Flask app. An upgrade to the AJAX JavaScript API.
Enjoying this type of content? Head over to my website at pythonise.com for full length text based tutorials, courses and guides.
Want to help me make even better content? You can by supporting me on Patreon! / juliannash
I was looking for a clear answer how to perform communication between front to back-end for a long time. And after that I found this tutorial, which is clear and understandable for me as a beginner. Julian Nash - thanks a lot. It gives me a milestone in my first programming project.
you have NO IDEA, how MUCH OF A HEADACHE YOU SAVED ME. OH MY GOODNESS. THANK YOU
Best Python Flask Jinja Tutorial available on RUclips !!! He has explained each and every thing properly.
That's exactly I was looking for... *Amazing* ....Thanks a ton Julian!!!
Amazed by all the talents Charlie Cox have.
I just completed my project seeing your video. Great help.
vids are class mate, wish i found them earlier!
Thank you soo much for taking your time to do this. I dunno if u hear this a lot but ur special.
Thanks pal, very useful tutorial, greetings from South America. Greetings fro the flask community.
This is great content. Thank you!
Thank you very very very very very.....much.
You saved project.
Thank you again.
You really helped me solve a big problem. Bless you
Gah! This video got me. Didn't see (in the previous video) about adding a {% block script %}{% blockend %} in the public_template.html so it took ages to get working. Still, enjoying the series so far.
Very Helpful, thAnks to you 👍👍👍
Thanks for great tutorial, really helped me with my project!
It hit right the thing I want. Love your video, great content with an example from the server side. I had been struggling with all the documentation which has nothing on the server-side, and I cant understand how and where to send the fetch url, but your video saves me. So thump up for ya !
Bro you just saved my day! Thanks a ton!
Do you have this code up anywhere? It's a bit inconvenient to have to scrub through the video to find bits that I'm referencing in my own application.
Saved my day ..
Hello Julian, thank you for the help. I was hoping to view the json data in the terminal on the web page, what video is that in?
Excellent resource, thank you very much. :)
You're an amazing teacher mate, well done!
Tip: Always show code link at the end of the video.
Thanks for your help mate! Last few days was wrapping my mind around this topic, and just clicked while watching this video.
How to hide this script from the client side, or can I make a post of these values and sent to the back end to do some stuff in a python program (back-ended)
This guy saved me !!! Thank A Lot !!!
*Need HELP* As per this tutorial I'm sending data with POST request using fetch();
in my views.py file I'm able to print it in the console. But when I pass it using render_template() to a html file, the table rows which I expect to update are NOT updating.
is it possible to send data from flask back to javscript without using jinja?
Thank you very much
why use fetch() and not Ajax get or post to retrieve and send data back to server?
Love your work manze.
Thanks for this amazing tutorial!
At its basics, it's just a way to perform API POST, GET..., directly from vanilla JS inside the DOM, then you're just communicating with your python backend as normal. For some reason that was confusing at the start.
i m getting an error : Fetch error: TypeError: Failed to fetch
any idea?
how could the example work :
response.json().then(function (data)
response.json() object doesnt have any methode call then and it s note a promise
Amazing, thank you!
Thanks, for making this Video Julian :)
Great tutorial. Thanks!
good explanation but I really want to click and move another route by rendering a template, so far I am in the route but since is not JSON and instead is
Awesome stuff man, this helped me a lot!
Is there a reason an else statement is not included in the .then method?
is it possible to send octet-stream inside the json along with other types of data?
If you use Token CSRF, I recommend putting this on the headers "X-CSRF-TOKEN": csrf
Si utiliza Token Csrf, recomiendo poner esto en las cabeceras "X-CSRF-TOKEN": csrf
Example/Ejemplo:
csrf = 'Your token'
headers: new Headers({
"Content-Type": "application/json",
"X-CSRF-TOKEN": csrf
})
why use this and not a request.args or request.form or something like that?
very helpful....I'll check out some more of your videos....I did spend some time running down my typos..nothing new there
The best!!
thank you merry much!
Hi! I'm getting this error in the console guestbook:72 Uncaught ReferenceError: submit_entry is not defined
at HTMLButtonElement.onclick (guestbook:72). Could you help please?
oh nevermind the question. I figured it out. Thanks for this tutorial! Very helpful
@@m3wt518 how did you figure it out? I'm stuck with that issue. Thanks.
@@m3wt518 Nevermind. I´ve already fixed it. :D
Hey Julian, thanks for the great video! Could you please explain how to actually return the response? i always get "Undefined"
thanks, helpfull example!.
very useful video.. few things need to be updated in the code to make it work error-free
Helpful, next time will be very good if we will meke a zoom that permits to read you code watching the video from a smart phone
Flask forms would work better in this case I believe
Thanks for the video!
A question about ${window.origin}. What programming language is that?
It does not seem to work for me, I use the below instead.
fetch(window.location.href+'getjson',{
Do you know if there is any difference?
It's JavaScript and a more modern feature called string interpolation by Template Literals. ${variable} inside backticks will be read out, computed, and put into the resulting string, Example: const name = "yichuan"; console.log(`My name is ${name}`); // Prints "My name is yichuan". See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
You are using "old style" string concatination syntax.
What would be the reason to use Fetch API, instead of form data as in Pt 7? (Or maybe requests if that is possible?)
Thanks! I like your videos a lot, very explanatory!
I also watched the series of Corey Shafer on Flask (which I liked BTW), but yours are more instructive and clearer so far. You use less additional libraries, which let it be more Pythonic.
The advantage of async/fetch/asyncio is that it is non-blocking. Other parts of your code can still be executed when awaiting. Some applications I found fetch to be useful for include polling and checking form content prior to submitting.
Checking form content:
What you may want to do is to check that the form content is correct before it is actually submitted. For example, if your user can input a file with only certain type(s) of extension(s), you will want to check if the provided file extension is correct before submitting to the server. If it is not, you give feedback to the user. In JS preventDefault() can be used for this, followed by fetch() after having made sure the form data is correct. A double check on the server side should be done as well (in the file extension example you could use Python's assert keyword)
Polling:
If you're doing some computationally expensive task in the background, you may want to use fetch to want to periodically check when the task is completed. You could use Celery to offload an expensive task, and use fetch to poll the server every couple of seconds to check if the task is completed. If you don't do this, your request will time out after a minute or so
hello julian , really i need you help please , can we use the datatime with flask ?
can we use the datatime with flask ?
if yes , please how if we limted two date , means date of start and date of end ?
:) :)
Of course, you can use any Python library with Flask, including datetime.
Can you explain more about what you're trying to do?
@@juliannash3590 good evening , :)
I have a file contains two columns the first column contains the values (I have 1 and -1) the second column the date and I have to computer the number of 1 and -1 from a date start and date end.
u can help me ?
Yes you can use datetime module for that
awesome video buddy, keep it up ;)
Getting an error: ReferenceError: submit_entry is not defined
If anyone is having this trouble, for me it was because the script block was not being loaded as i was missing {% block script %}{% endblock %} in the template.
Thanks you saved my ass
coooolll
this was really fun, shame your channel's dead
Videos and explanation are great, but I feel like the videos go from "Flask Tutorial" to "HTML tutorial". I fully get that they are related, but I would be happier I you mainly talked about the basics and main concepts of flask without going into coding of HTML.
Excellent stuff man. Thank you so much.