How to send multiple forms with Ajax (FormData) in Django

what's up programmers in this quick tutorial i'm going to show you how to send the form in django using ajax and forum data normally it's also possible to send forms only with ajax by defining data inside the function and i think i already explained this in my previous tutorials but with form data it becomes much simpler and faster to handle the form submission so let's get started as always as you see i created a new project named my site a new app named core and i already configured the settings.pi so let me quickly show you what's going on here i include the app in uh into installed apps configuration and i configured the templates here as you see and since we will serve and send images in our project that's why i configured media url here as well and static url here uh just to serve this h this actually css and js stuff and let's switch to model stuff right here i created very simple model i tried to keep it very as simple as simple as possible so as you see the fields are going to be title description and image and then i migrate these models uh making migrations everything as you know you should be familiar with this stuff if you are not beginner in django so let's switch to views.pi i add new uh view here as you see it's very simple i'm just i'm just getting all created objects and rendering it in our template and the last thing is i include this um view in urls or actually let's say i include a new path in urls.i as you see here a new path just to render our view in this uh in this path all right enough wasting time i know this is very basic part you're actually right now saying that okay just come to main stuff please i don't want to i don't want to watch these parts okay okay just let me close this url pi here okay so let's now create our templates folder here quickly don't worry i will not going to write every html stuff again here i'm just creating these files and i will i will copy and paste this html blocks directly from my github repository so let's go this is my github repository i will put the link in the description of this video so you can clone or download the project from this link let me open bayes html and copy this code block here and boom so here it is i have two urls here one of them is blog for blog and one of them is for creating posts ctrl s and then switch to blog html i will copy this html as well and paste it here that's it i'm just iterating through posts and fetching all the fields here you know you this stuff is really boring let me close this i don't want to see it anyway okay so what's forum data forum data is basically a data structure that can be used to store key value pairs it's designed for holding forms data and you can use it with javascript to build an object that corresponds to that html form in our case we will store our forum values and pass them into ajax and then ajax will make post requests to a django backend okay i'm saying it i'm saying it again we will store our forum values inform data and pass them into ajax and then ajax will make post requests to a django backend that's it now let's create a new html file in our templates name create post html all right now let's create our form and ajax request i don't really want to waste time again to writing all this stuff i know you need the solution as soon as possible because uh uh when i search for something i really don't want to watch the watch the tutorials the guy writing here manually it's really um i'm not i'm not really patient in this kind of situation so i know some of you are waiting for the result as soon as possible so that's why i'm just copy pasting this code simply directly from my github repository and here it is we have a really simple forum here by the way i'm using bootstrap for for the styling we have really simple forum here and as you see we have all the fields the title description and image and i include the id pro id attributes for each fields and the final oh no this is not field this is button and i just add a new id for this button because we will listen clicks when the user will click the jquery will listen to this button clicks by using its id right here this is just really uh basics of jquery you should be familiar with this stuff because it's really beginner level of the programming actually web programming let's say all right as you can see in script part first we are creating four data objects the main part is starting okay first we are creating form data object and then we are using append method to append a key value pair to the object you can change the key name whatever whatever you want but i am keeping it same as the field names because we will use them later to fetch data in general use but you can change it to post title post description post email image it doesn't really matter we will just use these key names to fetch uh the right data in django backend and you can see i'm using id here the field id to get the right fields and the values are fetched by using vowel methods this is just a simple jquery stuff you should already be familiar with this because this really beginner level of beginner level of web programming and the same situation for description but the image field is bit different the image the image is file input so we can't get it so we can't get the file just using val method the file input stores list of files and since we are uploading only one file we can get it from we can get it from the first position of the list like this okay next we have a new key value pair here the action uh what it does it's just separating the post request in the django backend for example let's say we have two forms in our page one of them is for creating posts and one of them is for creating comments when you make a post request django should understand which post request is this is it from post post creation form or is it from comment creation forum let's say so we can separate them by adding this just extra field here inform data and define the action name so django will understand i will show you in a second when we will create when we will create the views the django will check if it's a create post or if it is create comment for example and the last thing is for forum data is csrf middleware token uh what it does as you know this is just we're avoiding 403 forbid error when the post request has been made this is this is compulsory when we are making post requests right okay the this is all for a forum data part and we have ajix function here the ajax function let's go through these properties here type post of course we're making a post request that's why the the request type is post and next property next property is url which is current url here we will create this url later in this tutorial and the data so um in the ajax function instead of defining each field manually in in front of this data property we are just passing form data object uh directly to the ajax function so the form so the agex will send this form data to the django backend so we don't have to define each field manually in front of this data property cache false and okay this two guys here is really important process data falls and content type false if you do not include these two lines in your ajax request the form the the ajax request will fail because forum data expects these two uh configurations in ajax function so please uh include this process data and content type set them false and include into ajax function uh what it does let's say process data falls you must set process data false uh because otherwise jquery will try to convert your forum data into string which will fail naturally and content type false forcing jquery not to add a content type header for request otherwise the boundary string will be missing from it okay that's why these two lines is important ink type multi-part for data because we are sending images and finally when uh once the ajax function sent successfully the success function will let us know by uh alerting in browser that the post has been sent if the post request has been failed then error function will show us what is the error in browser console okay let's save it here and let's go to our views.pi in our app so we can fetch the post request in django backend so i'm creating new um function here create let's say post view and i'm passing request argument and okay so uh if you remember i said we add a new extra field in our ajax function which is the action create post and we are going to use it here right now if request dot post dot get action so we are now getting the action the action is equal to create post then run the code state below so we are first we are fetching title so i will write title request post request dot post that get title okay uh this is the key name here you see if we write post title here then we should rename it with post title but i'm just keeping it the same as your main title get title that's it then description let's just copy this line here paste it here and then i'm going to change this title to the description that's it and image image equals request the image is file that's why we are going to say files dot get image and that's it then we are creating our object by using a create function post objects dot create title equals title description equals description and finally image across image and then let's render our template return render the template name let's first pass request and the template name is create post html right and that's it we don't have context here ctrl s and okay so simply we are getting the data by its key name and then using create a function to create a new object in the database and i'm sending again as you see uh the if statement where we used if statement to check the action name so if the action name is create post then the object will create okay and let's now switch to urls.pi in our um root the project project directory and we will add a new path here [Music] create post [Music] and let's import our view here create post view comma create first view and let's name it create post create post right let's see was here create post that's it and since we are again using the image we are sending images and we we want to display image in our templates we should add some extra arguments some we should configure some extra uh actually we have to add some extra configurations here i'm sorry from django let's see confirm import settings and then from django that's it and then we are just adding this one static okay so that's it we just add uh the extra conf the media configuration here to show to display our image in the brow in our templates so let's save everything and hopefully it will work let's run the project say python manage.py run server let's see what's gonna happen what no model named my site django uh okay i'm just telling mistake here that's it let's run it again clear and run okay so the server is running let's go to the browser and test it here [Music] and boom that's it we have blog url here at create post url so if i click blog there is nothing here because we don't have any posts yet but let's create a one enter title let's add awesome space oh my god great title for the post and description i don't know choose a file let's choose a file for example this one and when i click to submit you see the ajax request has been successfully sent the post has been created let's click ok and when i click to the blog you can see our new post has been created let's create another one for example i will write nasa enter description and choose a file i have only one wallpaper right now that's why i will select the same wallpaper here something okay let's click the blog as you can see we have two new posts here so that's it it's really simple as you say there is nothing really complicated here we just uh use we just used fork data with ajax request and you can see how uh how easy it is to uh handle post requests uh by using this uh two great tools from data and ajax and in views that i will just fetch all these data and created a new object in database so that's all for now thank you for watching and if you want to download or clone this project i will put the link put my github link in the description of this video so you can download and run this project in your computer thank you and see you next time

Channel: Developer Timeline

Views: 4,905

Keywords: python, django, django and ajax, django ajax formdata, django formdata, formdata, django post request

Id: v1W-fyVDI9s

Length: 17min 30sec (1050 seconds)

Published: Wed Oct 28 2020