我希望 table 只有在单击提交按钮后才可见。但它并没有像它应该的那样停留在屏幕上。单击提交按钮后， table 会出现一秒钟，然后再次变得不可见。请让我知道我在代码中做错了什么。另外请让我知道是否有其他方法可以做到这一点。
索引。html
<form action="#" id="form" method="post">
<div style="margin-left: 2rem;">
<!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
<input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
</div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
<table style="display: none;" id="table">
<tbody>
<tr>
<th scope="row">Profile No. : </th>
<td>{{ProfileNo}}</td>
</tr>
<tr>
<th scope="row">Name : </th>
<td>{{Name}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function hide() {
document.getElementById("form").submit();
let table = document.getElementById("table");
if (table.style.display === 'none') {
table.style.display = 'table';
}
}
</script>回答1
为此，您需要使用 AJAX。如果您这样做，提交按钮会向服务器执行 POST 请求，因此您会再次刷新页面。
这里有一个很好的解决方案供您使用：https://www.pluralsight.com/guides/work-with-ajax-django
回答2
您可以通过以下方式在 Django 中执行此操作：
视图.py：`
def contact(request):
if request.method == "POST":
message_name = request.POST['message-name']
# message-name has to be in your form
# do something with the data in your view
return render(request, 'template.html', {'message_name': message_name})
#return a variable message_name to the contexttemplate.html:
{% if message_name %}
<center><h2><table id="your table"><tr><td></td></tr></h2></center>
{% else %}
<form action="#" method="post">{% csrf_token %}
<div class="row">
<div>
<input type="text" name="message-name">
</div>
<button type="submit">Display table</button>
</form>
{% endif %}` 如果不想在表单中显示任何字段，可以使用隐藏输入类型。这个想法是从 POST (message-name) 中捕获变量并在视图中依赖它 (message_name)
回答3
您也可以使用 localstorage 并切换显示 value 。客户端 Javascript 无法接收 post 数据，您可以在提交表单时在 localstorage 上 store 一个 value，一旦页面重新加载，检查 value 是否已存储，修改您的显示，然后重置 value （就像你没有再次提交任何东西一样）
示例（不确定它是否适用于 SO 片段，复制并实际尝试）
window.onload = function () {
let mydisplay = localStorage.getItem("myTable");
console.log(mydisplay);
if (mydisplay == "table-cell") {
document.querySelector("#table").style.display = mydisplay;
localStorage.setItem("myTable", "none");
} else {
document.querySelector("#table").style.display = "none";
}
};
function hide() {
document.getElementById("form").submit();
console.log("submit");
localStorage.setItem("myTable", "table-cell");
}<form action="#" id="form" method="post">
<div style="margin-left: 2rem;">
<!-- <input class="btn btn-primary" type="submit" value="Submit" id="btn" onclick="hide()"> -->
<input class="btn btn-primary" type="button" value="Submit" id="btn" onclick="hide()">
</div>
</form>
<div style="margin-top: 4rem; display: flex; justify-content: center; align-content: center;">
<table id="table">
<tbody>
<tr>
<th scope="row">Profile No. : </th>
<td>{{ProfileNo}}</td>
</tr>
<tr>
<th scope="row">Name : </th>
<td>{{Name}}</td>
</tr>
</tbody>
</table>
</div>这是一个 jsfidlle，您可以在其中复制/粘贴独立 HTML 页面的代码以进行测试。 https://jsfiddle.net/zb901rLm/