我有一個緊急任務來制作一個網頁，該網頁允許用戶輸入一些資料，后端進行一些計算，結果需要顯示在輸入欄位下方的同一頁面中（如機票在線價格檢查）。
我是 Django 和 html 的新手。下面是我的第一個簡單在線計算器的測驗網頁，試圖弄清楚如何制作這樣的網路服務。
我發現一個問題，當點擊“提交”按鈕時，它往往會跳轉到一個新的網頁或一個新的網頁標簽。這不是我想要的。一旦用戶輸入資料并單擊“提交”按鈕，我希望頁面上的“結果”欄位直接顯示結果（即僅部分更新此欄位），而無需重繪 /跳轉到新頁面。我還希望在單擊“提交”后將用戶輸入資料保留在同一頁面中。
我看到可能有幾種不同的方法來完成這項作業，iframe/AJAX。但是，我幾天來一直在尋找/嘗試尋找答案和解決方案，但沒有一個答案真正適用于這個非常基本的簡單問題！！
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>
查看.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)
uj5u.com熱心網友回復：
我建議看看htmx.org，它使這變得非常簡單，而無需撰寫任何實際的 JS。
對于您的示例：
(1)您將 htmx JS（只有大約 10k）添加到您的 HTML，并使用hx-post和hx-target觸發表單上的 ajax 呼叫。有了這些，表單將觸發一個 AJAX 請求，并hx-target告訴 htmx 接受回應（您希望它只是您的計算結果）并將其放入 div 而不重繪 整個頁面。有關這方面的更多詳細資訊，請參閱檔案。還要注意我給了id包含結果的 div 。您需要hx-post="{% url 'blog:post_list' %}"將正確的名稱替換為您的視圖（我們不知道，因為您沒有發布您的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/[email protected]"></script>
</body>
</html>
(2)在您的視圖中，您可以通過檢查標頭來確定請求是否是來自 htmx 的 AJAX 請求，在這種情況下，您只想回傳結果。有更簡單或優雅的方法來做到這一點（例如 check 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})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/402154.html