Ajax请求复用旧参数问题求助：模态框切换库存类型后请求异常

你遇到的问题不是浏览器缓存导致的，而是每次调用pesquisarInventario函数时，都会重复给模态框的shown.bs.modal事件和输入框的blur/keypress事件添加监听。第一次调用时绑定的事件会保留旧的tipo参数，第二次调用时新的事件会叠加，导致触发请求时仍然使用第一次的参数。

解决方法 #

• 在绑定新的事件监听前，先移除旧的事件监听，避免事件叠加
• 修正模态框隐藏时清理的输入框名称（原代码写错了对应字段）
• 修复图标类名的拼写错误

修改后的代码 #

function pesquisarInventario(tipo) {
  $('#modal-buscar-inventario').modal({
    backdrop: "static",
    keyboard: false
  });

  $('#modal-buscar-inventario').modal("show");

  // 先解绑再绑定输入框的keypress事件
  $('input[name="search-pesquisar-inventario"]')
    .off("keypress")
    .on("keypress", function(e) {
      if (e.which == 13) {
        $(this).trigger("focusout");
      }
    });

  // 解绑模态框的shown事件，避免重复绑定
  $('#modal-buscar-inventario')
    .off('shown.bs.modal')
    .on('shown.bs.modal', function(e) {
      // 解绑输入框的blur/keypress事件后重新绑定
      $('input[name="search-pesquisar-inventario"]')
        .off("blur keypress")
        .on("blur keypress", function(e) {
          if (e.type == "blur" || e.which == 13) {
            var search = $(this).val();
            if (search.length > 3) {
              $.ajax({
                type: "GET",
                dataType: "json",
                data: {
                  search: search
                },
                url: "/inventario/ajax/pesquisar/inventario/" + tipo,
                beforeSend: function() {
                  $("#modal-buscar-inventario table tbody").html('<tr><td colspan="5"><div class="alert alert-info" style="margin-top: 10px"><i class="fa fa-spin fa-spinner"></i> Pesquisando...</div></td></tr>');
                },
                success: function(data) {
                  if (data.length > 0) {
                    var html = [];
                    $(data).each(function(index, inventario) {
                      var serial = (inventario.serial) ? (inventario.serial) : "";
                      var cor = (inventario.cor) ? (inventario.cor).toUpperCase() : "";
                      var marca = (inventario.marca) ? (inventario.marca) : "";
                      var modelo = (inventario.modelo) ? (inventario.modelo) : "";
                      var categoria = (inventario.categoria) ? (inventario.categoria) : "";

                      html.push("<tr data-tipo='" + tipo + "' data-serial='" + serial + "' data-cor='" + cor + "' data-marca='" + marca + "' data-modelo='" + modelo + "' data-categoria='" + categoria + "' data-id='" + inventario.id + "'>");
                      html.push("<td>" + (inventario.serial).toUpperCase() + "</td>");
                      html.push("<td>" + marca.toUpperCase() + "</td>");
                      html.push("<td>" + modelo.toUpperCase() + "</td>");
                      html.push("<td>" + cor.toUpperCase() + "</td>");
                      html.push("<td>" + categoria + "</td>");
                      html.push("<td><button class='btn btn-xs btn-primary' type='button' onclick='selecionarInventario(" + inventario.id + ")'><i class='fa fa-hand-o-up' aria-hidden='true'></i></button></td>");
                      html.push("</tr>");
                    });
                    $("#modal-buscar-inventario table tbody").html(html.join(""));
                  } else {
                    var html = '<tr><td colspan="7"><div class="alert alert-warning" style="margin-top: 10px"><i class="fa fa-exclamation-triangle"></i> Nenhum resultado encontrado com o filtro aplicado.</div></td></tr>';
                    $("#modal-buscar-inventario table tbody").html(html);
                  }
                },
                error: function() {}
              });
            }
          }
        });
    });

  $('#modal-buscar-inventario').on('hidden.bs.modal', function(e) {
    var html = '<tr><td colspan="5"><div class="alert alert-info" style="margin-top: 10px"><i class="fa fa-info-circle"></i> Utilize o campo acima para buscar o responsável.</div></td></tr>';
    $("#modal-buscar-inventario table tbody").html(html);
    // 修正输入框名称，与搜索框保持一致
    $('input[name="search-pesquisar-inventario"]').val("");
  });
}

关键说明 #

• 使用.off()方法在绑定新事件前移除旧监听，确保每次调用函数时使用最新的tipo参数
• 修正了原代码中输入框名称不匹配的问题（原代码清理的是search-pesquisar-responsavel，实际应为search-pesquisar-inventario）
• 修复了警告图标类名的拼写错误（fa-exclamation-triangule改为fa-exclamation-triangle）

内容的提问来源于stack exchange，提问作者Bernardo Mantoan Castellani