我有一个网上定价网页，客户可以在那里输入一些数据，然后提交表格以获得返回的价格。如何在计算/返回最终结果（如价格）之前暂时显示“正在进行/正在加载/正在计算“之类的内容。
下面是我网站上的简化代码：
主网页（post_list. html）（注意：我正在使用htmx来帮助部分更新页面结果）
<html>
<body>
<form method="POST" hx-post="{% url 'post_list' %}" hx-target="#num_1" hx-target="#num_2" hx-target="#result">
{% csrf_token %}
<div>
<label>num_1:</label>
<input type="text" name="num_1" value="" placeholder="Enter value" />
</div>
<div>
<label>num_2:</label>
<input type="text" name="num_2" value="" placeholder="Enter value" />
</div>
<br />
<div id="num_1">{{ num_1 }}</div>
<br />
<div id="num_2">{{ num_2 }}</div>
<br />
<div id="result">{{ result }}</div>
<br>
<button type="submit">Submit</button>
</form>
<script src="https://unpkg.com/htmx.org@1.6.1"></script>
</body>
</html>发布列表代码段.html
<html>
<div>
<label>first_number:</label>
<span id="num_1"> {{ num_1 }} </span>
</div>
<div>
<label>second_number:</label>
<span id="num_2"> {{ num_2 }} </span>
</div>
<div>
<label>calculation_result:</label>
<span id="result"> {{ result }} </span>
</div>
</html>查看.py
def post_list(request):
result = ""
num1 = ""
num2 = ""
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 render(request, 'blog/post_list_snippet.html', {'num_1': num1,'num_2': num2,'result': result})
else:
return render(request, 'blog/post_list.html', {'num_1': num1,'num_2': num2,'result': result})
1条答案
按热度按时间ffscu2ro1#
这里有一个使用Bootstrap 5加载程序的方法。将以下所有代码添加到main.html
步骤1：添加包含加载器的html元素
确保style=“显示：无;”
第二步：添加js函数，在表单提交时显示加载器
步骤3：在表单元素中为onsubmit分配js函数
当表单成功提交时，加载模态将出现，然后在视图完成执行和重定向时消失。