Django: отправка html-формы без перехода на новую страницу или обновления/перезагрузки

Я новичок в django и html. ниже приведена моя первая тестовая веб-страница простого онлайн-калькулятора.

Я обнаружил проблему, что при нажатии кнопки "submit" происходит переход на новую веб-страницу или новую веб-вкладку. это не то, что я хочу. Когда пользователь вводит данные и нажимает кнопку "отправить", я хочу, чтобы поле "результат" на странице непосредственно показывало результат (т.е. частично обновляло только это поле) без обновления/перехода на новую страницу. Также я хочу, чтобы введенные пользователем данные оставались на той же странице после нажатия кнопки "submit".

Я видел, что есть несколько различных способов сделать эту работу, iframe/AJAX. Поскольку я новичок, какой действительно самый простой способ достичь этой цели? BTW, я не пишу javascripts.

html:

<form method="POST">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Enter value" />
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Enter value" />
    </div>
    <br />
    <div>{{ result }}</div>
    <button type="submit">Submit</button>
</form>

view.py

def post_list(request):
    result = 0
    if request.method == "POST":
        num1 = request.POST.get('num_1')
        num2 = request.POST.get('num_2')
        result = int(num1) + int(num2)
        print(request.POST)
        print(result)

    context = {
        'result': result
    }
    return render(request, 'blog/post_list.html', context)

Это простой пример использования Ajax, который, я надеюсь, будет вам полезен.

сначала вам нужно изменить post_list вид:

view

from django.http import JsonResponse

def post_list(request):
   if request.method == "POST":
      num1 = request.POST.get('num_1')
      num2 = request.POST.get('num_2')
      result = int(num1) + int(num2)

      return JsonResponse({"result":result})

   else:
      return render(request, 'blog/post_list.html', context={"result":0})

Я использую JsonResponse, потому что я просто хочу получить данные result в ajax и отобразить их в html, для GET запроса вывести html файл и для POST запроса использовать JsonResponse, чтобы вернуть json как контекст. И ваш html файл должен выглядеть следующим образом:

html

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>


<form method="POST" id="post-form">
    {% csrf_token %}
    <div>
      <label>num_1:</label>
      <input type="text" name="num_1" value="1" placeholder="Enter value" />
    </div>
    <div>
      <label>num_2:</label>
      <input type="text" name="num_2" value="2" placeholder="Enter value" />
    </div>
    <br />
    <div id="result" >{{ result }}</div>
    <button type="submit" >Submit</button>
</form>

<script>
$(document).ready(
  $('#post-form').submit(function(e){
    e.preventDefault();
    var serializedData = $(this).serialize();

    $.ajax({
      type:"POST",
      url: "/your_url/",
      data:  serializedData,
      success: function(data){
        $("#result").text(data["result"]);
      },
    });
  })
);
</script>

Сначала я использую jQuery cdn, а затем ваш html файл, за исключением того, что я добавил атрибут id=post-form к форме и добавил id=result, затем был добавлен тег <script> и функция jquery внутри тега была выполнена, когда ваша форма Submited (обнаружить событие по id #post-form). Затем вы получаете данные(num_1, num_2) методом serialize и используете Ajax для отправки запроса POST в функцию представления(post_list), в Ajax вам просто нужно передать serializedData и url(также вы можете использовать тег Django url или установить его в форме действия или...), После этого нам нужно отправить данные в html(означает результат, который мы получили от представления).

в success функции Ajax вы можете добавить html тег в ваш html файл или заменить некоторые значения,...

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