Как использовать кнопку отправки формы без обновления страницы?

Question

У меня есть функция в views.py, которая принимает данные (через пост-запрос на странице HTML) и добавляет их в список, а затем возвращает вновь добавленный список.После отправки вся страница обновляется.У меня есть элемент фона (видео в цикле).

В моем HTML-файле я изменил тип кнопки с type = "submit" на type = "button", что предотвращает повторное создание страницы.загружается и продолжает корректно воспроизводить фоновое видео.Тем не менее, это не похоже на мою основную функцию.Я подумал, что, возможно, используя type = "button" и затем сделав команду для запуска функции, это может сработать, но я могу ошибаться в этом.Я прочитал решения, которые другие опубликовали с Javascript и AJAX;Я пытался скопировать и вставить некоторые, но безуспешно.Я новичок в программировании и буду очень признателен за отзывы и помощь!Спасибо Тобиасу

в views.py:

def test5(request):
    pd = [8, 24, 'kb']
    user_data = {}

    if request.method == 'POST':

        x = request.POST.get('x') 

        pd.append(x)

    return render(request,'app/test5.html',{'data': pd})

в test5.html:

{% extends 'app/testbase.html' %}  <!-- this brings in my background video -->

{% block content %}

This is a test<br>
[8, 24, 'kb'] <br>

<script>
    function click_action()  {
    }
</script>

<form method="post" action="/app/test5/" id="post-form">
    {% csrf_token %}

    <input name="x" placeholder="Enter number" value="" required autofocus>

    <button onclick="click_action()" name="start_button" id="myBtn" type="submit">add to list </button>
</form>

{{ data }}

{% endblock %}

Я хотел бы напечатать недавно добавленный список (pd) наэкран без обновления страницы после нажатия кнопки.Спасибо за помощь !!!!

Answer 1

Во-первых, ваша страница перезагружается, потому что это поведение форм по умолчанию, когда вы нажимаете кнопку Отправить, вы можете предотвратить это, используя: e.preventDefault()

Вы можете использовать этот код:

<script>
    function submit_action(event)  {
        event.preventDefault();  // to prevent the page reload (and the submit also)

        let number = $("#numberInput").val();

        $.ajax({
           url: "/app/test5/",
           method: "POST", 
           data: {"x": number}, 
           success: function (data) {        
               // here you receive the data and you need "manually" update the template
               console.log(data);
           }
       });
    }
</script>

<form method="post" action="/app/test5/" id="post-form" onsubmit="submit_action(event)">
    {% csrf_token %}

    <input id="numberInput" name="x" placeholder="Enter number" value="" required autofocus>

    <button type="submit">add to list </button>
</form>

Вы должны включить JQuery в этот код, вы можете узнать его здесь , если вы не знаете, как

Я думаю, вы просто играете с этим кодомлучший способ добавить число в список - просто использовать javascript и DOM-манипуляции, если вам не нужно хранить значение в базе данных или что-то в этом роде.

Answer 2

Напишите свою форму следующим образом:

<form id="post-form">
    {% csrf_token %}

    <input id="idName" name="x" placeholder="Enter number" value="" required autofocus>

    <button onclick="click_action()" name="start_button" id="myBtn" type="button">add to list </button>
</form>

поместите следующий код в click_action() функцию

$('#myBtn').click(function(){
    var name=$("#idName").val();

    $.ajax({
        url: "/app/test5/",
        method: "POST", 
        data: {"name": name}, 
        success: function (data) {        
            // Show a pop up on success
        }
    });
});

В функции вашего скрипта views.py, если вы пишете return render(request,'app/test5.html',{'data': pd}) в конце функции, подобной вашей, она всегда будет перенаправлять после выполнения этой функции просмотра.Итак, попытайтесь избежать этого и используйте JsonResponse(status = 200, data = {'success' : 1}).

Итак, в вашем views.py

from django.http.response import JsonResponse


def test5(request):
    pd = [8, 24, 'kb']
    user_data = {}

    if request.method == 'POST':

        x = request.POST.get('x') 

        pd.append(x)

    return JsonResponse(status = 200, data = {'success' : 1})