Django предотвратить обновление страницы

Question

Так, ребята, у меня есть 2 проблемы. Я довольно новичок в Django и Python. Я создаю страницу с формой, и я могу вводить данные в эти поля, я получаю данные, выполняю с ними некоторую операцию и возвращаю другие переменные, которые отображаются в div под полем формы после нажатия кнопки. Это на самом деле работает, но страница обновляется, поэтому я могу видеть результат только в течение одной секунды. Вторая проблема заключается в том, что мне нужно дважды нажать на кнопку, чтобы она показала мне правильный результат. Пример: первое нажатие кнопки Result показывает x, затем я использую другой ввод и нажимаю кнопку, результат снова показывает x. После того, как я снова нажму на кнопку, он покажет правильный результат, как мне решить эту проблему.

А у вас есть предложения, как сделать эту систему лучше?

Я уже очень благодарен за вашу помощь.

Мой файл просмотра:

from django.shortcuts import render,redirect
from django.http import HttpResponse
from pages.forms import NameForm

import requests

# Create your views here.

def home_view(request,*args,**kwargs):
    api_key = "RGAPI-9b573263-7b5a-433e-9e82-a973f5db4749"
    name = ""
    tier = ""
    rank = ""
    lp = 0
    if request.method == 'POST':
        form = NameForm(request.POST)

        if form.is_valid():
            summoner = form.cleaned_data["summoner"]
            region = form.cleaned_data["region"]
            url = "https://" + region + ".api.riotgames.com/lol/summoner/v4/summoners/" \
                                 "by-name/" + summoner + "?api_key=" + api_key
            response = requests.get(url).json()
            id = response["id"]
            name,tier,rank,lp = ranklookup(id,region,api_key)
    return render(request,"home.html",{'form' : form,'rank':rank, 'tier' : tier, 'lp' : lp, 'name' : name})





def ranklookup(id,region,api_key):
    rankurl =  "https://" + region + ".api.riotgames.com/lol/league/v4/entries/by-summoner/" + id + "" \
            "?api_key=" + api_key
    rankResponse = requests.get(rankurl).json()
    if rankResponse[0]["queueType"] == "RANKED_SOLO_5x5":
        name = rankResponse[0]["summonerName"]
        tier = rankResponse[0]["tier"]
        rank = rankResponse[0]["rank"]
        lp = str(rankResponse[0]["leaguePoints"])

    else:
        name = rankResponse[0]["summonerName"]
        tier = rankResponse[1]["tier"]
        rank = rankResponse[1]["rank"]
        lp = str(rankResponse[1]["leaguePoints"])
    return name,tier,rank,lp

И мой HTML-файл:

{% extends 'base.html' %}

{% block content %}
<h2> League of Legends Rank lookup</h2> <br>
<div id ="ranklookup"> 
<form id="myform"  method="post">  {% csrf_token %}
{{ form }}
</form>  
<button onclick="showDiv()" type="submit" id="but" form="myform" value="button">Submit</button><br><br>
<div id="showRank">
  This will get replaced
 </div>

<script type="text/javascript">
  function showDiv(){
    var tier = ' {{ tier }}';
    var rank = ' {{ rank }} ';
    var name = ' {{ name }} ';
    var lp = {{ lp}};

    document.getElementById("showRank").innerHTML =  "Name: " + name + "</br> Rank: " + tier + rank + "</br> LP: " + lp;
      }
      </script>
    {% endblock %}"

Answer 1

Если вы на самом деле не пытаетесь полностью перезагрузить страницу, вам следует искать способ обработки формы AJAX в django (то есть в этот предыдущий ответ ).В противном случае вы можете просто изменить свой код views.py следующим образом:

def home_view(request,*args,**kwargs):
    api_key = "RGAPI-9b573263-7b5a-433e-9e82-a973f5db4749"
    name = ""
    tier = ""
    rank = ""
    lp = 0

    if request.method == 'GET':
        form = NameForm(auto_id='myform')
        return render(request,"home.html",{'form' : form, 'showdiv': False})

    if request.method == 'POST':
        form = NameForm(request.POST)

        if form.is_valid():
            summoner = form.cleaned_data["summoner"]
            region = form.cleaned_data["region"]
            url = "https://{}.api.riotgames.com/lol/summoner/v4/summoners/by-name/{}?api_key={}".format(region, summoner, api_key)

            response = requests.get(url).json()
            id = response["id"]
            name, tier, rank, lp = ranklookup(id, region, api_key)
            return render(request, "home.html", {
                'form': form,
                'rank': rank,
                'tier': tier,
                'lp': lp,
                'name' : name,
                'showdiv': True })

и шаблон (который теперь вообще не использует javascript):

{% extends 'base.html' %}

{% block content %}
<h2> League of Legends Rank lookup</h2> <br>

<div id ="ranklookup"> 
    <form id="{{ form.auto_id }}"  method="post">
        {% csrf_token %}
        {{ form }}
    </form>  

    <button type="submit" id="but" form="{{ form.auto_id }}" value="button">
        Submit</button><br><br>

{% if showdiv %}
    <div id="showRank">
        Name: {{ name }}<br>
        Rank: {{ tier }}{{ rank }}<br>
        LP: {{ lp }};
    </div>
{% endif %}

{% endblock %}