我编写了一个 jquery ajax 脚本来通过 ajax 动态加载页面而无需重新加载页面。下面是我的导航菜单，其中有 5 个链接。

 <nav>
 <ul id='menu' class="menu-items">
 <li><a href="#Browse_Page1" class="albums active" id="page1-link"><i class="arcd-archive"></i></br>Browse</a></li>
 <li><a href="#Top_albums_Page1" class="pages" id="page2-link"><i class="arcd-music97"></i></br>Top albums</a></li>
 <li><a href="#Top_artists_Page1" class="albums" id="page3-link"><i class="arcd-microphone52"></i></br>Top artists</a></li>
 <li><a href="#Top_lists_Page1" class="pages" id="page4-link"><i class="arcd-numbered8"></i></br>Top lists</a></li>
 <li><a href="#Charts_Page1" class="pages" id="page4-link"><i class="arcd-rising9"></i></br>Charts</a></li>
 </ul>
 </nav>

这是分别加载导航菜单“#Browse_Page1”和“#Top_albums_Page1”的前两页的 jquery ajax。

 <script>
 $(function() {
 $('header nav a').on('click', function() {
 var linkClicked = $(this).attr('href');
 if(linkClicked.indexOf('Browse_Page') == true)
 {
     var $Browse_PageRoot = linkClicked.replace('#Browse_Page', '');
     if (!$(this).hasClass("active")) {
 $("header nav a").removeClass("active");
 $(this).addClass("active");}
 $('#loading').css('visibility','visible');
     $.ajax({
        type: "POST",
        url: "load.php",
        data: 'Browse_Page='+$Browse_PageRoot,

        dataType: "html",
        success: function(msg){

            if(parseInt(msg)!=0)
            {
                $('#main-content').html(msg);
                $('#loading').css('visibility','hidden');
                $('#main-content section').hide().fadeIn();
            }
        }

      });
     }
    else
    {
   var $Top_albums_PageRoot = linkClicked.replace('#Top_albums_Page',  ''); 
     if (!$(this).hasClass("active")) {
    $("header nav a").removeClass("active");
    $(this).addClass("active");} 
    $('#loading').css('visibility','visible');      
     $.ajax({
            type: "POST",
            url: "load2.php",
            data: 'Top_albums_Page='+$Top_albums_PageRoot,

            dataType: "html",
            success: function(msg){

                if(parseInt(msg)!=0)
                {
                    $('#main-content').html(msg);
                    $('#loading').css('visibility','hidden');
                    $('#main-content section').hide().fadeIn();
                }
            }            
          });
       }

     });

   });
  </script>

最后，这是上面 jquery ajax 函数“load.php”和“load2.php”使用的两个 php 文件

  <!--load.php-->
  <?php
  if(!$_POST['Browse_Page']) ;
  $page = (int)$_POST['Browse_Page'];
  if(file_exists('Browse/Browse_Page'.$page.'.html'))
  echo file_get_contents('Browse/Browse_Page'.$page.'.html');
  else echo 'There is no such page!';
  ?>

  <!--load2.php-->
  <?php
  if(!$_POST['Top_albums_Page']) die("0");
  $page = (int)$_POST['Top_albums_Page'];
  if(file_exists('Top-albums/Top_albums_Page'.$page.'.html'))
  echo file_get_contents('Top-albums/Top_albums_Page'.$page.'.html');
  else echo 'There is no such page!';
  ?>

我的站点文件夹结构如下。

• 浏览
• 热门专辑
• 顶级艺术家
• 热门名单
• 图表

所以我的问题是，正如我上面所说，jquery ajax 函数从两个不同的目录加载两个不同的页面并且它工作正常但是我在导航菜单中有 5 个页面链接并且所有页面都在不同的目录中，5 个不同的目录!但是这个功能只支持两个目录。 我尝试添加更多 if else 语句来完全满足我的愿望，但它没有用。因为我是 jquery 的新手，所以我可能做错了! 或者有什么办法可以将其转换为 switch 语句？ 任何帮助将不胜感激。谢谢

最佳答案

这实际上非常可怕，您应该努力发送可以在服务器端轻松读取和计算的数据，而无需为每个数据集重复代码。

换句话说，将javascript重写成这样

$(function () {
    $('header nav a').on('click', function () {
        var linkClicked = $(this).attr('href');
        var data = {
            page      : linkClicked.replace(/\D/g, ''),
            directory : linkClicked.replace(/(_Page(.*)|#)/g,'')
        }

        $("header nav a").removeClass("active");
        $(this).addClass("active");
        $('#loading').css('visibility', 'visible');

        $.post('load.php', data, function(msg) {
            $('#main-content').html(msg);
            $('#loading').css('visibility', 'hidden');
            $('#main-content section').hide().fadeIn();
        }, 'html');
    });
});

现在您正在发送看起来像这样的数据

{
    page      : "1",
    directory : "Browse"
}

在服务器端，您需要进行切换以获取单个 PHP 文件中的内容

<?php

    $page = filter_var( $_POST['page'], FILTER_VALIDATE_INT);
    $dir  = filter_var( $_POST['directory'], FILTER_SANITIZE_STRING);

    if ( $page !== false && $dir !== false ) {

        $link = $dir . '/' . $dir . '_Page' . $page . '.html';

        if ( file_exists( $link ) ) {
            echo file_get_contents( $link );
        } else {
            echo 'There is no such page!';
        }
    }
?>

关于javascript - 如何将 jquery ajax if else 语句转换为 switch 语句，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31358983/