Skip to content

Instantly share code, notes, and snippets.

@Arfey
Last active August 28, 2016 16:41
Show Gist options
  • Save Arfey/c9bc6c3562d9cb0bcd2d0687fefd05ed to your computer and use it in GitHub Desktop.
Save Arfey/c9bc6c3562d9cb0bcd2d0687fefd05ed to your computer and use it in GitHub Desktop.

Відправка форм за допомогою django і jQuery.ajax


Відправлення простої форми

index.html

<form>
	{% csrf_token %} 
	<label for="">Name</label>
	<input type="text" name="name">	
	<label for="">Phone</label>
	<input type="text" name="phone">
	<label for="">Email</label>	
	<input type="text" name="email">
	<br>	
	<input type="submit">
</form>

script.js

var form = $('form')

form.submit(function() {
	var token = $('[name="csrfmiddlewaretoken"]').val();
	var data = $('form').serializeArray();
	$.ajax({
		url: '.',
		method: 'POST',
		headers: {'X-CSRFToken': token},
		data: data,
		contentType: false, // Відключаємо стандартний  content-type
		processData: false, // Відключає конвертацію даних в строку
		success: function(data) {
			alert("success");
		}
	})
	return false
});

Django

# views.py

from django.views.generic import TemplateView

class SimpleForm(TemplateView):
    template_name = "index.html"

    def post(self, request, *args, **kwargs):
        data = request.POST
        return JsonResponse(data)

Відправелння файлу + його збереження

index.html

<form>
	{% csrf_token %}
	<label for="">Name</label>
	<input type="text" name="name">	
	<label for="">Phone</label>
	<input type="text" name="phone">
	<label for="">Email</label>	
	<input type="text" name="email">
	<label for="">File</label>	
	<input type="file" name="file1">
	<br>	
	<input type="submit">
</form>

script.js

var form = $('form')

form.submit(function() {
	var token = $('[name="csrfmiddlewaretoken"]').val();
	var file = $('[name="file1"]')[0].files[0] // Дістаємо файл
	var data = new FormData(); // Створюємо об’єкт FormData. Цей об’єкт відправляється при звичайному
				   // відправленні форми new FormData($('form')[0]). 
	data.append('file1', file);// додаємо в об’єкт FormData файл з назвою 'file1'
	$.ajax({
		url: '.',
		method: 'POST',
		headers: {'X-CSRFToken': token},
		data: data,
		contentType: false, 
		processData: false,
		success: function(data) {
			alert("done");
		}
	})
	return false
});

Django

# models.py

from django.db import models
from django.forms import ModelForm

class UploadFile(models.Model):
    file1 = models.FileField(upload_to='uploads/%Y/%m/%d')


class UploadForm(ModelForm):
    class Meta:
        model = UploadFile
        fields = ['file1', ]

# Спосіб №1
# views.py

from .models import UploadForm
from django.views.generic import TemplateView

class SimpleForm(TemplateView):
    template_name = "index.html"

    def post(self, request, *args, **kwargs):
        data = request.POST
        file = UploadForm(request.POST, request.FILES) # Всі файли знаходяться в request.FILES
        if file.is_valid():
            obj = file.save()
            print(obj.file1.url) # path до файлу
        return JsonResponse(data)
        
# Спосіб №2
# views.py

from django.views.generic import TemplateView


class SimpleForm(TemplateView):
    template_name = "form/index.html"

    def post(self, request, *args, **kwargs):
        data = request.POST
        print(data)
        print(request.FILES)
        if 'file1' in request.FILES:
            file = request.FILES['file1']
            # print(dir(file.open))
            filename = file.name
            with open('%s/%s' % (settings.MEDIA_ROOT, filename), 'wb+') as destination:
                destination.write(file.read())
        return JsonResponse(data)

Валідація форми frontend [ресурси]

https://habrahabr.ru/post/181758/ https://jqueryvalidation.org/documentation/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment