Рубрики
Без рубрики

Как отправить django form с ajax

Что случилось до сеть Dev? В этом быстром руководстве я собираюсь показать вам, как публиковать форму Django без … Помечено Django, Python, JavaScript, WebDev.

Что случилось Dev Сеть?

В этом быстром руководстве я собираюсь показать вам, как разместить форму Django без освежающей страницы, используя Ajax. .

Я предполагаю, что вы уже создали свой проект. Давайте начнем с создания нашей самой простой модели Models.py.py.

from django.db import models

class Post (models.Model):
    title = models.CharField(max_length=50)
    description = models.TextField()

    def __str__(self):
        return self.title

Как только вы создали Open Просмотр .py и вставить следующий код:

from django.shortcuts import render
from django.http import JsonResponse
from .models import Post

def create_post(request):
    posts = Post.objects.all()
    response_data = {}

    if request.POST.get('action') == 'post':
        title = request.POST.get('title')
        description = request.POST.get('description')

        response_data['title'] = title
        response_data['description'] = description

        Post.objects.create(
            title = title,
            description = description,
            )
        return JsonResponse(response_data)

    return render(request, 'create_post.html', {'posts':posts})

Как вы видите, мы импортировали Jsonresponse который является подклассом httpresponse, который помогает создать ответ JSON-кодированным. Это заголовок типа содержимого по умолчанию установлен на приложение/JSON. Первый параметр, данные, должен быть экземпляром Dict. Мы будем использовать данные JSON для отображения созданного поста прямо сейчас.

Я настоятельно рекомендую взглянуть на следующий вопрос Tackoverflow, чтобы иметь лучшее понимание разницы между запрос. Пост [] и request.post.get ()

В чем разница между

request.POST.get('sth')

и

request.POST['sth']

Не нашел аналогичный вопрос, оба работают то же самое для меня, предположим, что я могу использовать их отдельно Но, может быть, я не прав, поэтому я спрашиваю. Любые идеи?

Если у вас есть более одной формы на вашей странице, вы можете разделить их с помощью действие Таким образом, ваш взгляд не получит несколько запросов одновременно.

Чтобы создать и сохранить объект на одном шаге, мы используем Создать () метод.

Давайте посмотрим нашу форму HTML сейчас


  {% csrf_token %}

Как вы знаете, мы используем CSRF_Token, чтобы сделать запрос Post, и это просто простая форма начальной загрузки. Мы даем ID для каждого входа, чтобы получить значения с AJAX по идентификатору.

$(document).on('submit', '#post-form',function(e){
    $.ajax({
        type:'POST',
        url:'{% url "create" %}',
        data:{
            title:$('#title').val(),
            description:$('#description').val(),
            csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
            action: 'post'
        },
        success:function(json){
            document.getElementById("post-form").reset();
            $(".posts").prepend('
'+
                '
' +
                    '
' +
                        '
' + json.title + '
' +
                        '
' + json.description + '
' +
                    '
' +
                '
' +
            '
' 
            )
        },
        error : function(xhr,errmsg,err) {
        console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
    }
    });
});

Обратите внимание, что вы должны включить jQuery-2.2.4.min.js в ваши статические файлы, вы можете взять его из моего Git Repository Отказ

Хорошо! Что здесь происходит? Первоначально важно добавить свойство ID для вашей формы, поэтому jQuery может обнаруживать представление формы. Ajax Тип Определяет тип запроса, который является постом, потому что мы отправляем данные в базу данных и URL Указывает URL для отправки запроса. Затем мы используем метод Val () для получения значений элементов формы по ID и отправка его с помощью данные Параметр, который определяет данные, которые будут отправлены на сервер. Необходимо получить значение CSRF_Token, иначе она приведет к 403 запрещенной ошибке. Как вы видите, мы указали действие, чтобы позволить нашему представлению обнаруживать, какая форма отправляется.

После того, как запрос успешно отправлен, мы чистящие формы и добавление нашего нового поста прямо сейчас в скандинавскую строку.

Если возникает некоторая ошибка при отправке запроса (я надеюсь, что нет »), то последняя функция добавит эту информацию об ошибке в консоль, поэтому вы можете увидеть, что вызвало эту неприятную ошибку. Я думаю, вы уже знаете, как хорошо отображать ошибку пользователю.

В конце вы получите следующий результат

Миссия выполнена!

Вы только что узнали, как публиковать форму Django, используя Ajax 🚀🚀

Вы можете клонировать или загрузить этот проект из моего Git Repository И не забудьте следовать и поддерживать меня на твиттер и Instagram Присоединяйтесь к обратным сообществу астронавтов! 👨🚀 Увидимся в следующем руководстве!

#django follow

Оригинал: “https://dev.to/coderasha/how-to-send-django-form-with-ajax-4bpo”

Читайте ещё по теме: