jQuery:捕获锚点href onclick并异步提交

时间:2012-09-29 00:33:59

标签: jquery ajax hyperlink anchor

我几乎从来没有玩过客户端的东西,这可能是一个简单的任务就是踢我的屁股:)

我有一些链接。 OnClick我想阻止默认操作,捕获其href url,向该URL提交ajax GET,并简单地alert()显示结果......但我甚至无法超越起始行:)

播放时间的示例锚点:

<a class="asynch_link" href="good/1.html">Click Here</a>
<a class="asynch_link" href="good/2.html">Click Here</a>

现在,我已经对SO上的类似请求提出了一些建议,但链接仍然会导致浏览器导航到href网址。

即使只是

<script type="text/javascript">
    $('a').click(function (event) 
    { 
         event.preventDefault(); 
         //here you can also do all sort of things 
    });
</script>

...链接仍会导航到另一页。

我在这里感觉很像和婴儿:)

任何和所有帮助都将深受赞赏。

而且,是的,我 AM 包括jQuery :) <script src="//67.20.99.206/javascripts/jqueryCountdown/1-5-11/jquery.countdown.js" type="text/javascript" charset="utf-8"></script>

3 个答案:

答案 0 :(得分:39)

$('a').click(function(event) { 
    event.preventDefault(); 
    $.ajax({
        url: $(this).attr('href'),
        success: function(response) {
            alert(response);
        }
    });
    return false; // for good measure
});

答案 1 :(得分:19)

试试这个

$('a').click(function (event) 
{ 
   event.preventDefault(); 

   var url = $(this).attr('href');
   $.get(url, function(data) {
     alert(data);
    });

 });

答案 2 :(得分:4)

这里的问题是事件没有附加到你的元素,因为它们没有被绑定在DOM ready事件中。尝试在DOM准备事件中包含您的事件,如果它有效,您将看到警报

<script> 
    $(function() {
         $('a').click(function(event) {
            event.preventDefault();
            alert('fff')
        //here you can also do all sort of things 
        });
    }); 
</script>

之后发送Ajax请求并在Success回调函数中提交表单..

<script> 
    $(function() {
         $('a').click(function(event) {
             event.preventDefault();
             $.ajax({
                 url: 'url',
                 dataType :'json',
                 data : '{}',
                 success :  function(data){
                     // Your Code here

                     $('#form').submit();
                 }
             })
        });
    }); 
</script>