javascript - 当尝试使用javascript激活一次时，如何防止表单提交按钮的递归激活？

Question

我正在创建一个 Django 应用程序，它根据表单从数据库中检索数据。该表格只是 list 的集合。然后使用 Bokeh 数据创建绘图。

该应用程序可以运行。也就是说，当按下提交按钮时，应用程序接受用户输入，收集相关数据并绘制图表。我的问题是，我希望在页面加载后立即提交表单，以便显示具有默认设置的图表。当前的行为是，在用户按下提交按钮之前不会显示任何图表。

这是一个抽象示例，有点重现了我的问题。请注意，这个例子并没有完全重现我的问题，因为我对 html/javascript 缺乏经验，因此很难使 html/javascript 等同于 Django 正在做的事情。然而，这里有一个尝试。请记住，按下按钮时应动态生成图表 - 显示哪个图表取决于用户输入。

<div id='form-container'>
  <form action='.' name='ctrl-panel' method='post' class='form-check-inline'>
    <ul>
      <li>
        <label id="label1">
        <input id='label1' type='checkbox' name='checkbox1' value='A' checked='checked'>Checkbox 1
      </label>
      </li>

      <li>
        <label id="label2">
        <input id='label2' type='checkbox' name='checkbox2' value='A'>Checkbox 2
      </label>
      </li>
    </ul>

  </form>

  <input type="submit" value="Submit" class="btn" id="submit-btn" form="ctrl-panel">

</div>

<script>
  window.onload = function clickBtnOnWindowLoad() {
    var btn = document.getElementById('submit-btn');
    btn.click();
  }
</script>

问题在于表单上的 action 设置为当前页面 .，并且 javascript 代码在加载页面时运行。因此，我得到了提交按钮的递归激活，因为提交按钮加载当前页面并加载当前页面按下了提交按钮。

是否有人有任何建议，以便我可以在页面加载时使用默认设置提交表单一次，并且仅提交一次。

Answer 1

我离Django很远，但从逻辑上讲有两种方法可以解决这个问题:

1. 从后端检测页面是否第一次加载(没有请求任何数据)。如果是 - 使用脚本渲染表单，否则不渲染表单；
2. 将 POST 更改为 GET，以便所有提交的值都将附加到 URL 的查询字符串中。然后，如果 URL 中有任何查询(可以使用 location.search 检测到)，则不要运行脚本:

(类似这样)

<script>
    window.onload = function clickBtnOnWindowLoad() {
        var btn = document.getElementById('submit-btn');
        if (!location.search)
            btn.click()
    }
</script>

但一般来说，如果您希望始终在用户输入可靠数据的情况下呈现表单，那么您的方法就不太好。我想，你应该考虑使用 AJAX 请求。