在线等待：django提交表单并在同一页面显示结果

Question

我有一个紧急任务要制作一个网页，允许用户输入一些数据，后端进行一些计算，结果需要显示在输入字段正下方的同一页面中（例如机票在线价格检查）。

我是 django 和 html 的新手。下面是我的一个简单的在线计算器的第一个测试网页，试图弄清楚如何制作这样的网络服务。

我发现了一个问题，当点击“提交”按钮时，它往往会跳转到一个新的网页或一个新的网页选项卡。这不是我想要的。一旦用户输入数据并单击“提交”按钮，我希望页面上的“结果”字段直接显示结果（即仅部分更新此字段）而不 refresh/jump 到新页面。我还希望用户输入数据在单击“提交”后保留在同一页面中。

我看到可能有几种不同的方法来完成这项工作，iframe/AJAX。但是，几天来我一直在 searching/trying 寻找答案和解决方案，none 的答案对于这个非常基本的简单问题确实有效！！

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)

Answer 1

我建议看一下 htmx.org，它使这变得非常简单，而无需编写任何实际的 JS。

以你的例子为例：

(1) 将 htmx JS（只有 10k 左右）添加到 HTML，并使用 hx-post 和 hx-target 触发表单上的 ajax 调用。使用这些表单将触发 AJAX 请求，并且 hx-target 告诉 htmx 获取响应（您希望它只是计算的结果）并将其放入 div无需刷新整个页面。有关详细信息，请参阅 docs。另请注意，我为包含结果的 div 提供了 id。您需要将 hx-post="{% url 'blog:post_list' %}" 替换为您视图的正确名称（我们不知道，因为您没有 post 您的 urls.py）。

<html>
    <body>
        <form method="POST" hx-post="{% url 'blog:post_list' %}" hx-target="#result">
            {% 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 src="https://unpkg.com/htmx.org@1.6.1"></script>
    </body>
</html>

(2) 在您看来，您可以通过检查 headers 来确定请求是否是来自 htmx 的 AJAX 请求，在这种情况下，您只想 return 结果。有更简单或优雅的方法可以做到这一点（例如检查 django-htmx，但只是为了简单起见：

from django.http.response import HttpResponse
from django.shortcuts import render

# Create your views here.
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)

    if request.headers.get('Hx-Request') == 'true':
        # return only the result to be replaced
        return HttpResponse(str(result))
    else:
        return render(request, 'blog/post_list.html', {'result': result})

在线等待：django提交表单并在同一页面显示结果

Online waiting: django submit form and display result in same page

html

forms

django

ajax

jquery