django - display:'table' 没有按预期工作

我希望 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 context

template.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/

相似文章

jquery - 分页编号序列不起作用(jquery)

如果我单击任何数字,分页顺序将不起作用。如果我单击数字3,它会跳到数字4,每次我单击该数字时,它都会跳到另一个数字。但是,如果我单击下一个和上一个按钮,它就可以正常工作。它的发生是因为省略号li。任何...

makefile - 带有子目录的 gmake

我有一个适用于pmake的makefile,但不适用于GNUmake。我只是将它从一个微不足道的makefile移到更复杂的位置,这个问题出现在制作src和包含目录时。我不能使用GNUmake特定的语...

最新文章