Question

我有一个奇怪的错误，即从外部触发器（'click'）调用执行的on（'click'）侦听器中的ajax调用将失败，但是如果通过a调用了on（'click'）侦听器，则可以正确执行普通用户单击鼠标即可。

HTML：

....
<div class="navbar-collapse collapse">
  <ul class="navbar-nav mr-auto navbar-right">
    <li class="nav-item dropdown active">
      <a class="nav-link dropdown-toggle" id="nbd" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Graphs<span class="sr-only">(current)</span></a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item ycai" id="d1" href="#" data-type="1">Graph 1</a>
          <a class="dropdown-item ycai" id="d2" href="#" data-type="2">Graph 2</a>
        </div>
    </li>
  </ul>
  <form class="form-inline my-2 my-lg-0 navbar-right">
    <div id="nbsa"></div>
    <input class="form-control mr-sm-2" id="nbpc" placeholder="Postal Code" style="width:140px" aria-label="Postal Code" type="search">
    <select class="form-control mr-sm-2" id="nbs">
      <option value="1" selected="true">Average-case</option>
      <option value="2">High-case</option>
    </select>
  </form>
</div>

JS：

<script>
  var dataV = {
    gtype:2,
    nbpc: null,
    nbs:  null
  };

  $('#nbpc').keyup(function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      dataV.nbpc = $(this).val();
      switch(dataV.gtype) {
        case 1:
          $('#d1').trigger('click');
          break;
        case 2:
          $('#d2').trigger('click');
          break;
      }
    }
  });

  $('#nbtop').on('click', '.ycai', function(e) {
    console.log('In Click...',$(this).attr('data-type'));
    e.preventDefault();
    var i=0, rval;
    if (!$(this).hasClass("dislink")) {
      $(this).addClass("dislink");
      dataV.nbpc = $('#nbpc').val();
      dataV.nbs = $('#nbs').val();
      dataV.gtype = +$(this).attr('data-type');
      console.log(dataV);
      if (dataV.gtype<8 && dataV.nbpc == "") {
        alert('Postal Code Cannot Be Blank...');
        $('.dislink').removeClass('dislink');
        $('#nbpc').focus();
        return;
      }

      $.ajax({
        type: 'POST',
        url: '/climG',
        dataType: 'json',
        data: dataV
      }).fail(function(jqXHR, textStatus, error) {
        console.log(textStatus);
        console.log(error);
        alert('Error on Graph');
      }).done(function(res) {
        ...
      });

场景1：如果我先在（#nbpc）中添加邮政编码（不按Enter键），然后选择一个图（例如图2），则ajax调用会通过并执行得很好。

场景2：如果我在（#nbpc）中添加邮政编码，然后按Enter（默认为图2），然后执行$（'＃d2'）。trigger（'click'）;通过$（'＃nbpc'）keyup侦听器，则ajax调用将失败，并且没有错误消息。

有趣的是node.js控制台行。

在方案1中，控制台日志行很完美：

Console Log Line 1
... 
Console Log Line N
POST /climG 200 378.344ms - 1872

在方案2（错误）中，控制台日志行非常奇怪：

GET /? 304 192.332 ms - -
POST /climG - - ms - -
Console Log Line 1
... 
Console Log Line N

因此在方案2中，额外的GET /？出于某些未知原因而生成，并且/ climG调用迅速返回失败，但是实际的/ climG服务器端功能仍在执行（由POST消息后的控制台日志行证明）。我不知道发生了什么事。谢谢。

Answer 1

form元素的操作默认为GET-如果您不使用表单提交数据，则可以安全地删除此标记。

很可能是在您没有机会执行JS之前，按下 enter 键触发的。

换句话说，更改

<form class="form-inline my-2 my-lg-0 navbar-right">
    <div id="nbsa"></div>
    <input class="form-control mr-sm-2" id="nbpc" placeholder="Postal Code" style="width:140px" aria-label="Postal Code" type="search">
    <select class="form-control mr-sm-2" id="nbs">
      <option value="1" selected="true">Average-case</option>
      <option value="2">High-case</option>
    </select>
  </form>

到

<div class="form-inline my-2 my-lg-0 navbar-right">
    <div id="nbsa"></div>
    <input class="form-control mr-sm-2" id="nbpc" placeholder="Postal Code" style="width:140px" aria-label="Postal Code" type="search">
    <select class="form-control mr-sm-2" id="nbs">
      <option value="1" selected="true">Average-case</option>
      <option value="2">High-case</option>
    </select>
  </div>

单击时AJAX调用失败

1 个答案: