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是更广泛页面中的部分刀片，当用户想要“观察”新的股票代码时，此代码段会触发。 AJAX调用我的Laravel API，在Postman中工作得很好，huzzah！

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

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

为什么呢？（它是否与我注意到的地址栏添加查询的烦恼有关？我希望地址栏无论如何都要说project.dev。）我有点生疏，已经离开了田野一年多了，所以请保持温柔._。

PS：FWIW，我通过Laravel为我提供了Vue;我目前没有使用它，但如果它有所帮助，那么将它包括在内就没有任何努力。我只知道关于Vue的杰克。

Answer 1

问题评论摘要......

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

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

创建警报框（jQuery，Bootstrap），但它一直在消失

1 个答案: