Как заставить кнопку отправлять данные в функцию django с помощью ajax

Я пытаюсь создать html-кнопку, которая получает данные со страницы и отправляет их в функцию django. Кнопка не связана с формой или чем-либо еще. Я относительно новичок в django и я пробовал миллиард различных подходов к этой проблеме без успеха. Любые предложения будут очень признательны.

Первый и самый простой шаг для этого - сначала создать новое приложение под названием ajax и добавить его в приложения, установленные в настройках Django.

Перейдите к project_name/urls.py и включите ajax в отдельный адрес:

urlpatterns = [
    ...,
    path('ajax/', include('ajax.urls')),
]

Затем создайте файл urls.py в ajax и напишите его в качестве примера:

from django.urls import path
from . import views

app_name = 'ajax'

urlpatterns = [
    path('First', views.FirstAjax, name='First'),
]

Переменная app_name записана, потому что она предотвращает жесткий код.

Перейдите в ajax/views.py и создайте новое представление под названием FirstAjax:

from django.http.response import HttpResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def FirstAjax(request):
    text = request.POST['text']
    return HttpResponse('All Done!')

Почти все отлично! Если вы хотите писать ajax методом POST, вам нужно установить декоратор csrf_exempt, чтобы Django не реагировал на CSRF-токены. Но если вы хотите сделать это методом GET, вам не нужен этот декоратор.

Теперь вы можете использовать Ajax, добавив JQuery в проект:

Простой пример: 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h2 id="myheader">My template</h2>
<button onclick="Ajax()">Click me!</button>

<script>
function Ajax() {
    $.post("{% url 'ajax:First' %}", {text:'Hello, Ajax!'}, function(response){ 
        console.log('Done');
    });
}
</script>

</body>
</html>

Надеюсь, этот небольшой пример помог вам и другим людям.

Вернуться на верх