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

【问题标题】：How to degrade gracefully with ajax loops如何使用 ajax 循环优雅地降级
【发布时间】：2012-07-01 21:50:44
【问题描述】：

我有一个主循环，当单击某些图标时，我将其替换为其他循环。每个循环实际上都有自己的页面，但对于使用 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;
}

【问题讨论】：

标签： jquery graceful-degradation

【解决方案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; 

 })

【讨论】：