Django: При нажатии на кнопку/ссылку отправлять запрос API, получать данные, сохранять их в переменной и помещать переменную в textarea/textbox без обновления страницы

Я ломал голову, пытаясь придумать простое решение для того, что мне пришло в голову.

Что бы я хотел иметь:

  1. User clicks on a button or a link disguised as a button to reveal information.
  2. The server will then send an API request to https://randomuser.me/api, which is outside of the domain.
  3. The first name of the random user in the API will be stored in a variable.
  4. The variable storing the first name will then be put in the textarea.
  5. The button's text will change to "hello" as a greeting instead of just "button" and will not be clickable from now on. OR TO BE FANCY: It can have a timer counting down from 20 minutes.
  6. The div that was hidden previously will now show up with the updated button and the textarea filled in with the first name of the random person, ready for the user to copy.

Я знаю, что могу использовать Python для получения результатов запросов с сервера. Я просто не знаю, как реализовать это в Django с теми возможностями, которые я хочу получить, особенно без перезагрузки/обновления страницы.

HTML-страница:

<div>
  <a href="#" class="button" onclick="showButtonDetails()">button</a>
  <div id="showDIV" style="display: none;">
    <textarea readonly class="" id="inputBox">{{first_name}}</textarea><br>
    <button onclick="copyToClipBoard()">copy</button>
  </div>
</div>

Яваскрипт, который я использую для кнопок и т.д.:

function copyToClipBoard() {
    var content = document.getElementById('inputBox');
    content.select();
    document.execCommand('copy');
}

function showButtonDetails() {
    var x = document.getElementById("showDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

Сценарий Python, который я попытался выполнить:

import requests

url = 'https://randomuser.me/api'
response = requests.get(url)
response = response.json()
print(response)

# Stuck here on how to just get the first name.
# Then store it in a variable.
# Then use Django to output that variable in the textarea on the HTML page using {{first_name}}.

Я предоставил ссылку с тем, что у меня есть для HTML и Javascript: https://syncfiddle.net/fiddle/-MhKQt4vGvSgvnRhEjB7.

Я застрял на том, как обновить urls.py и views.py. Django немного отличается от того, к чему я привык.

Я ценю, что кто-то смотрит на это. Мне кажется, что есть простое решение, но я не могу понять его.

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