Question

我正在从<a>标记进行Ajax调用和页面重定向。示例代码：

<a onclick="return clickFn()" href="somelink"></a>
clickFn(){
  someAjaxCall()
  redirectPageByExtractingHrefFromTheElem()
  return false;
}

我知道一旦进行了ajax调用并且页面重定向，那么回调就会被取消，但服务器将继续调用。

但是我很困惑是否会从浏览器触发ajax调用直到页面重定向调用发生。因为在我的测试中上面的代码确实调用了Ajax，但是下面的代码甚至不会激活ajax调用，所以我不确定第一个代码是否是万无一失的：

 <a onclick="return clickFn()" href="somelink"></a>
    clickFn(){
      someAjaxCall()
      return true;
    }

有人可以解释事件的流程吗？

Answer 1

超链接onclick和href属性的默认行为是执行onclick，然后只要onclick没有返回false就跟随href，事件没有被阻止。

由于您在第一个代码段中返回false，因此您可以进行AJAX调用。

<a onclick="return clickFn()" href="somelink"></a>
clickFn(){
  someAjaxCall()
   redirectPageByExtractingHrefFromTheElem()
   return false;
}

但是在您的第二个代码段中，您将返回true，这将允许浏览器根据href属性重定向到另一个页面。这就是您在第二次服务电话中无法拨打AJAX的原因。

<a onclick="return clickFn()" href="somelink"></a>
clickFn(){
   someAjaxCall()
   return true;
}

根据W3.org

与链接关联的默认行为是检索另一个Web资源。通过选择链接（例如，通过单击，通过键盘输入等）来通常和隐式地获得此行为。

因此，为了防止默认操作，您应该使用preventDefault()事件方法来阻止默认操作。

实现。

将event作为参数传递给clickFn和使用event.preventDefault来阻止默认操作。

function clickFn(event) {
  event.preventDefault();
  someAjaxCall();
  // var URL = event.target.href;
  redirectPageByExtractingHrefFromTheElem();
}

<a onclick="clickFn(event)" href="somelink">somelink</a>

页面转换期间的Ajax调用

1 个答案:

实现。