Question

我有一个基于标签的设置，标签内容是异步加载的。

<nav>
  <ul>
    <li><a href="/default" class="handle current" data-handle="default">OVERVIEW</a></li>
    <li><a href="/services" class="handle" data-handle="services">SERVICES</a></li>
    <li><a href="/clients" class="handle" data-handle="clients">CLIENTS</a></li>
  </ul>
</nav>
</div>
  <div class="tab selected" data-handle="default" data-populated="true">Some stuff in here.</div>
  <div class="tab unselected" data-handle="services" data-source="/services-snipet" data-populated="false"></div>
  <div class="tab unselected" data-handle="clients" data-source="/clients-snipet.html" data-populated="false"></div>
</div>

我已将事件附加到handle类，以便它可以移动current类并适当地切换selected / unselected类。但是，在进行切换之前，它会检查新选项卡上的dataset["populated"]。如果是false，它将通过AJAX加载dataset["source"]并填充。

此外，我正在使用event.preventDefault()作为流程的一部分，以免不遵循标签本身的链接。

所有这一切都很好。

问题是我希望能够重新触发默认事件 - 链接 - 如果AJAX请求失败或超时。有没有办法暂停/延迟默认事件，直到我有异步AJAX响应，那么可以决定我是否要阻止它？是否有一种替代机制可以让我在开始时阻止它，然后在我遇到AJAX失败或超时时重新触发它？或者我是唯一选择this的href并在失败案例中重定向页面的唯一选择？

（请不要jQuery）

Answer 1

在ajax调用中填充失败时，您可以更改document.location.href以强制重定向：

<强> DEMO

function ajax(event) {
    console.log(event);
    if(event.detail === 1) {
        event.preventDefault();
        var target = event.target;
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 ) {
               if(xmlhttp.status == 200){
                    //Do normal stuff
               }
               else 
               {
                    //Do the same event but without prevetion
                    target.click();
               }
            }
        }

        xmlhttp.open("GET", "ajax.php", true);
        xmlhttp.send();
    }
};

var elements = document.querySelectorAll("li a");
for(i=0; i<elements.length; i++) {
    elements[i].addEventListener("click", ajax, false);
}

在AJAX响应之后重新触发javascript默认事件

1 个答案: