我正在尝试开发一个送货服务网络，用户可以在表单中输入取货和送货地址并在线获取价格。如果价格合适，用户可以单击“下订单”按钮，该按钮将导航到另一个新页面，供用户填写附加信息，重要的是之前输入的提货和送货地址以及价格将需要自动显示在新页面。
我是 django 和 html 的新手，我尝试创建一个更简单的页面来实现相同的目的。现在我可以完成表单填写的第一部分，后端根据用户输入进行计算并返回计算结果（例如价格）。现在，我想知道如何“导航到另一个新页面，该页面将显示两个输入值和计算结果”
主要html:
<html>
<body>
<form method="POST" hx-post="{% url 'blog: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/[email protected]"></script>
</body>
</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>
view.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 HttpResponse(str(result))
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})
您可以使用重定向导航到新页面。以下是您可以轻松访问的方法。
url.py
from django.urls import path from .views import post_list,
order_confirmation
urlpatterns = [
path('', post_list, name='post_list'),
path('order-confirmation/<str:num1>/<str:num2>/<int:result>/',
order_confirmation, name='order_confirmation'),
]
views.py
from django.shortcuts import render, redirect
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 HttpResponse(str(result))
return redirect('order_confirmation', num1=num1, num2=num2, result=result)
return render(request, 'delivery/main.html', {'num_1': num1, 'num_2': num2, 'result': result})
def order_confirmation(request, num1, num2, result):
return render(request, 'delivery/child.html', {'num_1': num1, 'num_2': num2, 'result': result})
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delivery Service</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<h1>Delivery Service Form</h1>
<form method="POST" hx-post="{% url 'post_list' %}" hx-target="body" hx-swap="innerHTML">
{% csrf_token %}
<div>
<label>Pickup Address:</label>
<input type="text" name="num_1" value="" placeholder="Enter value" />
</div>
<div>
<label>Delivery Address:</label>
<input type="text" name="num_2" value="" placeholder="Enter value" />
</div>
<br />
<button type="submit">Submit</button>
</form>
</body>
</html>child.html
<!DOCTYPE html>
<html>
<head>
<title>Order Confirmation</title>
</head>
<body>
<h1>Order Confirmation</h1>
<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>
<br />
<button
hx-get="{% url 'post_list' %}"
hx-target="body"
hx-swap="innerHTML">
Go Back
</button>
</body>
</html>以下是项目结构。
your_project/
│
├── deivery/
│ ├── migrations/
│ ├── templates/
│ │ └── deivery/
│ │ ├── main.html
│ │ └── child.html
│ ├── views.py
│ ├── urls.py
│ └── ...
│
├── manage.py