javascript - 为什么我的浏览器在 ajax 后调用中发送两个请求？

Question

我在我的网页中放置了一个带有以下标签的链接:

<a href="" onclick="FiltrarxUnidadPolitica(1)">
   <label class="filter-item-title">
      Distrito Capital
   </label>
   <label class="filter-item-quantity">
      (3)
   </label>
</a>

点击链接时调用的js函数如下:

function FiltrarxUnidadPolitica(iIdUnidadPolitica, bLimpiarPropiedad) {
   $.ajax({
      data: { iIdUnidadPolitica, bLimpiarPropiedad },
      url: "/Home/ListadoInmuebles",
      type: 'POST',
   });
}

我遇到的问题是，当单击链接并执行 js 函数时，浏览器向服务器发出两个请求，正如您在插入的图片中看到的那样(待处理的调用)，第一个请求是包含在第二个函数是一个 GET 调用，我不知道如何发起。

有人知道 GET 调用来自哪里吗？

谁能给我一些关于我必须在哪里寻找的线索？

Answer 1

浏览器正在跟踪您的链接，因为您没有告诉它不要跟踪它。 (href="" 与“当前页面”相同。)

可以通过几种方法来防止这种情况:

• 不要对非链接的内容使用链接，使用 input type="button" 或 button 并将其样式设置为外观您想要它的外观(这也将有助于辅助软件)。
  (如果您使用 button，请确保它不在 form 中，或者具有 type="button" ；奇怪的是，按钮的默认类型是“提交”。)

• 使用 jQuery 而不是 onclick 属性来连接您的函数，并在事件对象上调用 preventDefault。

• 将 href 设置为 javascript:;

  <a href="javascript:;" onclick="FiltrarxUnidadPolitica(1);">
  

  (或 href="javascript:void(0)"。)

• 将 href 设置为 #anchor-that-does-not-exist

  (不要使用 href="#"，除非您希望页面在点击链接时滚动到顶部。)

  <

• 向 onclick 添加 return false:

  <a href="" onclick="FiltrarxUnidadPolitica(1); return false;">
  

  从 DOM0 属性样式处理程序返回 false 会阻止默认操作；更多内容请参见我的博客:The true story on return false .

可能还有其他人......