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

编写表单，如下所示：

<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})

Answer 2

首先，您的页面正在重新加载，因为这是您单击“提交”时表单的默认行为，您可以使用以下方法阻止此操作：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，如果您不知道怎么做，可以here学习

我想您只是在玩这段代码，向列表添加数字的最好方法就是使用javascript和DOM操作，除非您需要将值存储在数据库中。

如何在不刷新页面的情况下使用提交表单按钮？

2 个答案: