javascript - 创建警告框(jQuery、Bootstrap)但它一直消失

Question

让我们从一支笔开始:https://codepen.io/Muzical84/pen/EbPXBP

function validateInput(input, event) {
  'use strict';

  if (input == null || input !== "") {
    $.ajax({
        method: 'POST',
        cache: false,
        url: '/api/getAll'
      })
      .done(function(data, textStatus, jqXHR) {
        if (data !== null && $.isArray(data) && data.indexOf(input.toUpperCase()) === -1) { //The AJAX return is valid but the symbol does not exist.
          //debugger;
          $('#jsErrors').html('<p>The given symbol does not exist.</p>');

          $('#jsErrors').addClass('alert');
          $('#jsErrors').addClass('alert-danger');

          $('#jsErrors').removeClass('hidden');
          $('#jsErrors').removeClass('invisible');

          $('#jsErrors').show();
        } else {
          debugger;
          editWatchList(input.toUpperCase(), 'watch'); //Pass it along (function omitted from pen)
        }
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        console.error(errorThrown); //I am aware that this is less than ideal.  In the "real world", I would ask my supervisor how to handle this instance.
      })
      .always(function(a, textStatus, c) {
        debugger;
        event.preventDefault();
      });
  } else {
    alert('Please enter a symbol before submitting.');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<!-- This is actually a partial, Laravel Blade, specifically. -->
<div id="jsErrors" class="hidden invisible" role="alert"></div>

<form id="add-symbol-form" class="form-inline" accept-charset=utf-8 autocomplete="off">
  <!-- Laravel CSRF field -->
  <div class="container">
    <input type="text" class="form-control" name="symbol" id="symbol" placeholder="Enter a symbol..." required>
    <button type="submit" class="btn btn-dark" onClick="validateInput($('#symbol').val());">Add Symbol</button>
  </div>
</form>

<script>
  //Enter will have the same effect as clicking the button
  $(document).ready(function() {
    $(document).keypress(function(e) {
      if ($('#symbol').val() !== '' && e.which == 13) { //Only submit if the user hit enter AND there is something in the input box to validate.
        validateInput($('#symbol').val());
        e.preventDefault();
      }
    });
  });
</script>

这是一个基本的股票追踪器，用 Laravel 编写。 HTML 是更宽页面中的 Blade 部分，当用户想要“观看”新股票代码时会触发此代码段。 AJAX 调用我的 Laravel API，在 Postman 中运行良好，huzzah!

但是，如果用户输入了一个不在数据库中的符号，(我没有决定这个限制，所以请不要评论它=-\)我想提醒用户，因此初始为空-隐藏<div>在表格上方。

如果我使用调试器；单步执行我的代码的语句，方框显示，所有这些都完美无缺，但是当我的函数结束时，<div>完全消失。

为什么？ (这是否与我注意到地址栏添加查询的令人恼火的事情有关？我希望地址栏显示 project.dev 无论如何。)

PS:无论如何，我确实可以通过 Laravel 使用 Vue；我目前没有使用它，但如果它有帮助，那么包含它实际上是零努力。我对 Vue 了如指掌。

Answer 1

问题评论总结...

您似乎正在处理表单中提交按钮的点击事件。这将导致表单提交并可能重新加载页面，而不考虑您正在执行 ajax 逻辑。

为了防止这种情况，您很可能希望将提交按钮更改为常规按钮，以便在单击时不会提交表单；或将事件传递到 onclick 处理程序并在您的 ajax 逻辑之外调用 event.preventDefault()，这样表单将不会被提交。