如何在不刷新页面的情况下触发与jquery的链接?

时间:2013-03-31 12:24:14

标签: jquery ajax

我正在创建一个tumblr主题,我在帖子中添加了一个类似的按钮。这是一个示例网址:

<a class="loveit" href="http://www.tumblr.com/like/fGKvAJgQ?id=16664837215">like it</a>

这完美无缺。但是,结果只是一个空白页面,所以我需要一种方法来触发链接而不刷新页面。

目前我正在尝试此代码:

$('.loveit').click(function(e){
  e.preventDefault();
    var targetUrl = $(this).attr('href');
 $.ajax({
        url: targetUrl,
        type: "GET",
        success:function(){
            alert("done");
        },
        error:function (){
            alert("testing error");
        },
    });
});

但它不起作用。如何在不刷新现有页面的情况下运行此链接?

由于

1 个答案:

答案 0 :(得分:0)

尝试将您的网址放在rel:

<a class="loveit" href="javascript:;" rel="http://www.tumblr.com/like/fGKvAJgQ?id=16664837215">like it</a>

并在jquery中使用它:

$('.loveit').click(function(e){
  e.preventDefault();
    var targetUrl = $(this).attr('rel');
 $.ajax({
        url: targetUrl,
        type: "GET",
        success:function(){
            alert("done");
            return false;
        },
        error:function (){
            alert("testing error");
        }
    });
});

或者您可以使用onClick功能:

<a class="loveit" href="javascript:;" onClick="like(this);" rel="http://www.tumblr.com/like/fGKvAJgQ?id=16664837215">like it</a>


function like(placeholder) {
        $.ajax({
            url: $(placeholder).attr('rel'),
            type: "GET",
            success:function(){
                alert("done");
            },
            error:function (){
                alert("testing error");
            }
        });
        return false;
}