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被禁用，只需将用户发送到他们请求的页面。

e.g。

    <?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锚点。如果支持javascript，则脚本将使用您的ajax单击处理程序替换所有“ajaxnav”链接处理。很容易就是馅饼。

Answer 2

是的，如果用户的浏览器不支持JS或禁用了JS，则基本上会忽略脚本标记。无论如何都包括它们并没有什么坏处，你只需要计划你的网站，以了解当它们没有被利用时会发生什么。

就AJAX与页面重新加载而言，您只需将您的网站编码为好像没有AJAX，即所有链接都应该有适当的href属性指向它们应该去的位置。如果启用了JS，则通过其onclick处理程序将AJAX附加到链接，并通过从处理click事件的任何函数返回false来阻止默认操作。

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

2 个答案: