javascript - 防止链接的默认值取决于 Ajax 响应

Question

我在 Magento 中创建了一个 Controller ，用于检查列表中是否有产品。如果列表中有产品，它将返回true，否则返回false。

这是触发ajax调用的前端，请记住我无法将其更改为表单。它必须是一个链接。

<a href="[my_controller]" title="Compare Products" target="_blank" class="compare-product-link">Compare Products</a>

这是 ajax 调用。

jQuery(".compare-product-link").on("click", function(e) {
    jQuery.ajax({
        async    : false,
        dataType : "json",
        url      : "/compareextra/compare/allowed",
        success  : function(data) {
            //console.log(data);
            if(data.isAllowed != true) {
                e.preventDefault();
            }
        }
    });
});

我遇到的问题是 async 已被弃用，对用户体验不利，说有很多答案会增加 3 秒的延迟，我也不希望因为这不利于用户体验。

我也尝试过使用 Promise 调用，但它仅适用于 async : false。

jQuery(".compare-product-link").on("click", function(e) {
        var response = false;
        jQuery.ajax({
            dataType : "json",
            url      : "/compareextra/compare/allowed",
            success  : function(data) {
                console.log(data);
                if(data.isAllowed) {
                    response = true;
                }
            }
        }).done(function (){
            console.log(response);
            if(response != true) {
                e.preventDefault();
            }
        });
    });

编辑

我还遇到的另一个问题是，如果我将链接存储到变量中，然后打开一个新窗口，那么 window.location = href; 大多数浏览器都会阻止它，用户将不得不手动接受从目标网站弹出窗口，这又不利于用户体验。

Answer 1

使用 preventDefault 无法真正实现这一目标就像你说的 - 因为异步。我会尝试的是:

阻止默认

商店href作为变量

调用ajax

重定向至href如果 true 则变量，如果 false则不变量

jQuery(".compare-product-link").on("click", function(e) {
    var href = $(this).attr('href');
    e.preventDefault();
    jQuery.ajax({
        async    : false,
        dataType : "json",
        url      : "/compareextra/compare/allowed",
        success  : function(data) {
            //console.log(data);
            if(data.isAllowed == true) {
               window.location = href;
            }
        }
    });
});

如果您需要创建链接操作，可以使用以下代码:

function triggerClick(url){
  $('body').append('<span id="click_me_js"><a href="'+url+'"></a></span>');
  $('span#click_me_js a')[0].click();
  $('span#click_me_js').remove();
}

这将模仿常规点击 <a>