Question

我有一个Tumblr共享小部件的链接，需要在打开之前附加一些查询字符串参数（通过单击链接触发）。但是，在附加这些参数之前链接打开，我认为因为它需要几秒钟 - 我在页面上发送图像以便在imgur上托管并返回该URL。

有没有办法延迟新链接被打开，直到我的新图像网址被返回？我尝试过使用e.preventDefault();和return false;，但没有运气。

我的HTML是：

<button id='tumblrshare'>tumblr</button


$('body').on('click','#tumblrshare',function(e){
var svg = $("#svg")[0];
svg.toDataURL("image/png", {
    callback: function(img) {
    var img = img.replace("data:image/png;base64,", "");
    var imgurTitle = $("meta[property='og:title']").attr("content");
    $.ajax({ 
          url: 'https://api.imgur.com/3/image',
          headers: {'Authorization': 'Client-ID **********'},
          type: 'POST',
          data: {'image': img, 'type': 'base64', 'title': imgurTitle},
          success: function(result) { 
          imageURL = result.data.link;
          window.location = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
          },
          error: function(){
            console.log('error');
          }
    }); //ajax
  }//callback

});//svg

}); //tumblrshare

请帮助!!

Answer 1

改变＆＃39; href＆＃39;链接的属性一旦被点击就不会改变它的目的地。在ajax调用完成后，请考虑使用window.location重定向用户。

$('body').on('click','#tumblrshare',function(e){
   e.preventDefault(); // Stop the default behaviour
   ...
   $.ajax({
    success: function(result){
      window.location = result.data.link;
    },
    ...
  });
...
});

Answer 2

function loadTumblr(){
    var svg = $("#svg")[0];
    svg.toDataURL("image/png", {
        callback: function(img) {
            var img = img.replace("data:image/png;base64,", "");
            var imgurTitle = $("meta[property='og:title']").attr("content");
            $.ajax({ 
                url: 'https://api.imgur.com/3/image',
                headers: {'Authorization': 'Client-ID **********'},
                type: 'POST',
                data: {'image': img, 'type': 'base64', 'title': imgurTitle},
                success: function(result) { 
                    imageURL = result.data.link;
                    window.location.href = 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=http://www.example.com&caption=mycaption&posttype=photo&content=' + imageURL;
                },
                error: function(){
                    console.log('error');
                }
            }); //ajax
        }//callback
    });//svg
}

Answer 3

   $("a.alate").on("click",function(event){
 _thislink = $(this).attr("href");
event.preventDefault();
 console.log(_thislink);
$.ajax({
    type: 'get',
    url : 'https://restcountries.eu/rest/v1/all',
   fail:function(data) {
   console.log("fail");
  }
 }).done(function(data) {
  //  when request finish 
   console.log(data);
   //   window.location = _thislink;
 });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="alate" href="http://stackoverflow.com">Update Data then go</a>

对您使用的代码最重要的是

e.preventDefault();

停止href的默认行为

仅在执行某些事件后才在链接中打开href

3 个答案: