如何使用 ajax 循环优雅地降级

Question

我有一个主循环，当单击某些图标时，我会用其他循环替换它。每个循环实际上都有自己的页面，但对于使用 javascript 的用户，我只是允许他们在主页内容区域中切换循环。我阅读了一个关于如何做到这一点的教程，它使用 # 作为链接的 href，这不允许我链接到实际页面，只是让 javascript 忽略该链接并改为执行 ajax。所以我的问题是如何在下面设置这个过程，使其优雅地降级。

我有一个名为 mysite.com/my-favorites 的页面。

这就是我在主页上用ajax称呼该页面内容的方式。

<a id="fav" class="trigger-loop" href="#"><div id="favorite-icon"></div></a>
jQuery(document).ready(function($){
 $('#fav.trigger-loop').click(function(){
    $('.trigger').removeClass('active');
    $('.trigger-loop').removeClass('active');
    $('#fav.trigger-loop').addClass('active');
    $('#boxes').empty();
    $.post(
        WPaAjax.ajaxurl,
        {
            action : 'loop_fav',
        },
        function( response ) {
            $('#boxes').append( response ).masonry( 'reload' );
            $('.panel').hide("slow");
        }
    );
 });
});
add_action('wp_ajax_loop_fav', 'loop_fav');
function loop_fav(){
 wpfp_shortcode_func();
 exit;
}    

Answer 1

如果我的问题没错的话。

添加网址而不是# ，

<a id="fav" class="trigger-loop" href="mysite.com/my-favorites"><div id="favorite-icon"></div></a>

在click函数中，return false;，以便您的页面不会跳转到指定的 URL 并执行 ajax。

 $('#fav.trigger-loop').click(function(){
     ... your code...
     ... your code....
     return false; 
 })