Как отправить данные с фронт-энда на бэк-энд с помощью ajax и Dango?

INTRO: Я пишу приложение Django, которому нужно отправить некоторые данные с фронт-энда в файл views.py на бэк-энде. Для этого у меня есть кнопка, которая при нажатии выполняет транзакцию. Вот как это выглядит:

<button id="submit_transaction" type="button" class="btn btn-outline-info" onclick="transaction()">Transaction</button>

ПРОБЛЕМА: При нажатии на кнопку запускается функция transaction(), которая выполняет асинхронные операции, например, так:

<script>
    async function transaction(){
    // Perform some task

    // Submit transaction
    $.ajax({
          type: 'POST',
          data : {
              'public_key': public_key,
          },
          success: function(res){
            console.log(res);
          }
        });
    }
</script>

Внутри этой асинхронной функции есть вызов ajax, который собирает некоторые данные в переменную и затем отправляет их на back-end через post-запрос (как предложено здесь link).

Однако когда я нажимаю на кнопку, выскакивает следующая ошибка:

Uncaught (in promise) TypeError: Illegal invocation

ВОПРОС: Есть ли у вас идеи, что я делаю неправильно? Или вы можете предложить умное и элегантное решение для отправки некоторых данных с фронт-энда на бэк-энд?

Вам необходимо указать url

<script>
    
    body = {
        'csrfmiddlewaretoken': crsfToken,
        'public_key': ...
    }

    async function transaction(){
    // Perform some task

    // Submit transaction
    $.ajax({
          url: 'https://mysite',
          type: 'POST',
          data : body,
          success: function(res){
            console.log(res);
          }
        });
    }
</script>

Вы также должны предоставить csrf_token, если хотите, чтобы ваше представление django приняло запрос (или использовать csrf_exempt, что менее безопасно)

Я рекомендую использовать стандартную JS-библиотеку Request вместо Ajax, потому что Request - это родная библиотека. Вы можете найти больше документации здесь : https://developer.mozilla.org/en-US/docs/Web/API/Request/Request

Вот пример того, как я использую Request :

/**
     * Send some data to create an object in my db.
     * @param data what's created.
     * @returns {*} what was created server-side.
     */
    async create(data) {
        let res = await fetch(new Request('https://my.create.url', {
            method: 'POST',
            body: data,
            headers: {
                'X-CSRFToken': this.csrfToken,
                'Content-Type': "application/x-www-form-urlencoded" // required if you want to use request.POST in django
            }
        }));
        if (res.status === 201) {
            return res.text(); // Status (because I return HttpResponse(status=201) )
        }
        if (res.status === 400) {
            throw new InvalidFormError("form invalid", await res.text());
        }
        throw new Error(await res.text()); // You have to handle it afterward
    }

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