javascript - 优雅的 Javascript 降级 - 外部源文件

Question

精通 JS 的编码人员的简单问题。

我正在构建一个使用 jQuery AJAX 方法的 Wordpress 站点，在单击顶部导航链接时重新加载我的整个内容区域，或者在单击侧边栏导航链接时重新加载我的主要内容区域。我想确保仅当用户的浏览器支持 JavaScript 时才发出 AJAX 调用。我在这里和其他网站上找到了一些引用资料，通过从外部引用我的脚本，未配备 JavaScript 的浏览器会简单地忽略所有 JS 文件。这是准确的吗？我考虑过使用 php:

$my_arr = get_browser(null,true);if $my_arr['javascript'] == 1 {
  echo '<script type="text/javascript" src="path/to/script"';
}

我想要的用户体验是，如果启用了 JS，则触发 AJAX 调用；如果 JS 被禁用，只需将用户发送到他们请求的页面。

例如

    <?php
    /**
     * The template for displaying all pages.
     *
     $ajxy = $_GET['ajxy'];
     if(!is_null($ajxy)) {
       $ajax_code = $ajxy; 
     }

     if(!$ajxy) {
       get_header(); 
     }
     ?>

    <?php if(!$ajax_code) { ?>
            <div id="primary">
              <div id="content" role="main">
                 <div class="container_12" id="contentWrapper">
    <?php } ?>

                   <div id="contentContainer" <?php if($ajax_code) { echo 'class="ajxn"'; } ?>>

    <?php while ( have_posts() ) : the_post(); ?>

                    <div class="grid_8" id="contentGrid">
                        <?php 
                            get_template_part( 'content', 'page' ); 
                        ?>
                    </div>
                        <?php get_sidebar(); ?>

                    <?php endwhile; // end of the loop. ?>
                    </div>

                <?php if(!$ajax_code) { ?>
                </div>
                </div><!-- #content -->
            </div><!-- #primary -->
            <?php } ?>

    <!---My Ajax Loading Script -->
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/ajxy.js"></script><!---My Ajax Loading Script -->

    <?php 
    if(!$ajxy) {
        get_footer(); 
    }
    ?>

和脚本:

    function ajxnOff(list, ajxnCode, wrapper, container) {
        jQuery(list).click(function(e) {
            e.preventDefault();

            var $lnkGoz = jQuery(this).attr("href");

            var $lnkGozAjx = $lnkGoz + '?ajxy=' + ajxnCode;
            var $ajxyContainer = wrapper;
            var $ajxyCurThing = container;

            $ajxyCurThing.fadeOut(400, function() {
                    $ajxyContainer.html('<div id="loaderA"></div>');
                    jQuery("div#loaderA").fadeIn(400);
                    jQuery.ajax({
                        url: $lnkGozAjx,
                        success: function(data) {
                                jQuery("div#loaderA").delay(2000).fadeOut(400, function() {
                                    $ajxyContainer.html(data);
                                    jQuery("div.ajxn").fadeIn(400);
                                    jQuery.remove("div#loaderA");
                                });
                        }
                    });

            });
        });
    }

    jQuery(document).ready(function() {
        ajxnOff(jQuery("ul#topNavList a"), 1, jQuery("div#contentWrapper"), jQuery("div#contentContainer"));
        ajxnOff(jQuery("ul#sidebarNavList a"), 2, jQuery("div#contentGrid"), jQuery("div#contentPageContainer"))
    }); 

我已经自学编码大约 6 个月了，但没有任何关于该主题的书籍，因此非常感谢这里专家的任何帮助。

Answer 1

这是一个简单的模式，可以进行不显眼的 ajax 导航，并回退到非 ajax 链接。

在您的 HTML 中:

<a class="ajaxnav" href="page.html">Text</a>

在你的脚本中:

$(".ajaxnav").click(function(event) {
  event.preventDefault();
  // do ajax nav here; 
  // URL is in event.currentTarget.href, modify it however necessary
});

如果不支持 javascript，脚本将不会运行，您将只能使用具有有效 HREF 的标准 Web anchor 。如果支持 javascript，该脚本会用您的 ajax 单击处理程序替换所有“ajaxnav”链接处理。简单易行。