Приходит пустой post запрос ajax+django

11 апреля 2021, 02:30

После нажатия на кнопку отправляется post запрос:

ajax.js:

document.querySelector("#ajaxbtn1").addEventListener("click", function () {
        var xhr1 = new XMLHttpRequest();
        xhr1.open("POST", "http://127.0.0.1:8000/ajax/", true);
        xhr1.send("TEXT");
        xhr1.onreadystatechange = function () {
        if (xhr1.status != 200) {
            alert(xhr1.status + ": " + xhr1.statusText);
        } 
        else {
            alert("Uploaded!");
            console.log(xhr1.responseText);
        };
    };
})

Так же после отправки я вывожу в консоль responseText. В консоль выводится html, там всё отображается как надо. А именно нужна эта строчка: <p>b'TEXT'</p> Но при открытии файла ajax.html(на который посылается запрос) вместо нужной строки, там отображается: b''

views.py:

@csrf_exempt
def ajax(request):
    get_value = request.body
    return render(request, "blog/ajax.html", context = {"val": get_value})

ajax.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax</title>
</head>
<body>
    <p>{{val}}</p>
</body>
</html>

Или так всё и должно быть, тогда как сделать так, чтобы после нажатия на кнопку и перехода на страницу ajax.html в строчке было: "TEXT"?

В консоли никаких ошибок нет

Answer 1

Реализация json-ответа:

views.py

from django.views import View
from django.http import JsonResponse
from datetime import datetime

class TestView(View):
    @staticmethod
    def get(request):
        # Здесь Вы обрабатываете запрос и формируете ответ
        data = {
            'time': datetime.now(),
        }
        return JsonResponse(data)
    @staticmethod
    def post(request):
        # Здесь Вы обрабатываете запрос и формируете ответ
        data = {
            'time': datetime.now(),
            'comment': "It's response to POST request",
        }
        return JsonResponse(data)

urls.py:

...
urlpatterns = [
    path('test/', TestView.as_view()),
]

JavaScript на стороне клиента (используя jQuery):

// Пример запроса без передачи данных
$.getJSON('http://localhost:8000/test/', function(data){
    console.log(data);
})

После этого в консоли напечатается время, которое вернул сервер. Примерно так:

{time: "2019-07-18T16:47:17.413"}

Следует уточнить, что POST запросы делать сложнее. Требуется также передавать csrfmiddlewaretoken.

ajax.html:

...
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<script type="text/javascript">
    let csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
</script>
...

JavaScript на стороне клиента (используя jQuery):

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});