Question

我正在尝试使用bootstrap微调器在烧瓶处理请求时单击按钮时加载它，但是它不起作用。当我单击按钮时，请求将发送到flask，由于某种原因它永远不会到达javascript部分。为了确认这一点，我在单独的HTML页面上尝试了以下相同的HTML代码，并且可以正常工作。所以我的问题是：如何使javascript代码与发送到flask的请求一起工作。

HTML和Javascript部分是这样的：

<div class="container-fluid mt-3">
  <p class="font-weight-bold">Deactivate User</p>
  <br>
  <form action="{{ url_for('deactivate_user')}}" method='POST'>
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
    </div>
    <button type="submit" id="submit" class="btn btn-info btn-primary">Submit</button>
  </form>
</div>
<script>
  $('#submit').click(function () {
    this.form.submit();
    this.disabled = true;
    this.html = '<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>'
  });
</script>

我做错什么了吗？我对HTML相当陌生，所以请您先谅解我的无知。

Answer 1

您可以使用ajax

  <div class="container-fluid mt-3">
    <p class="font-weight-bold">Deactivate User</p>
    <br />
    <div>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text">@</span>
        </div>
        <input
          type="text"
          class="form-control"
          placeholder="Username"
          id="username"
          name="username"
          required
        />
      </div>
      <button id="submit" class="btn btn-info btn-primary">
        Submit
      </button>
    </div>
  </div>

然后

  <script>
    $('#submit').click(function (d) {
      let username = $('#username').val();
      $.post(
        "url_for_deactivate_user",
        {
          username: username,
        },
        function (data, status) {
          // if (data) {    // validate response data here
            this.disabled = true;
            this.html = `<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>
            `;
          // }
        }
      );
    });
  </script>

注意：请确保正确替换url_for_deactivate_user，并确保服务器给出响应。

单击底部时无法加载微调器

1 个答案: