Question

我编写了一个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>

这是加载导航菜单前两页的jquery ajax＆＃34;＃Browse_Page1＆＃34; ＆＃34;＃Top_albums_Page1＆＃34;分别

 <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函数使用的两个php文件＆＃34; load.php＆＃34;和＆＃34; load2.php＆＃34;

  <!--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语句？任何帮助将不胜感激。感谢

Answer 1

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

换句话说，将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!';
        }
    }
?>

Answer 2

好的，所以在这里，我在代码注释中做了一些修改。

为页面添加data属性，为目录添加另一个属性，例如。＆＃39;数据页面＆＃39;和＆＃39; data-dir＆＃39;每个a元素如此

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

更改onclick功能，使其从data属性中选取页面，并仅将ajax请求发送到一个php脚本。我还感动了“活跃的”＃39;函数的逻辑。

<script>
$(function() {
    $('nav ul#menu a').on('click', function(event) {
        event.preventDefault();
        // var linkClicked = $(this).data('page'); not using this anymore
        var pagevar = $(this).data('page');
        var dirvar = $(this).data('dir');
        // make the clicked link active, the rest of them inactive, show the loading element
        makeActive($(this));

        $.ajax({
            type: "POST",
            url: "load.php",
            data: {page:pagevar,dir:dirvar},
            success: function(msg){
                if(parseInt(msg)!=0) {
                    $('#main-content').html(msg);
                    $('#loading').css('visibility','hidden');
                    $('#main-content section').hide().fadeIn();
                }
            }
        });
    });

function makeActive(link){
    var ul = $(link).parent().parent();
    $('a',ul).removeClass("active");
    $(link).addClass("active");
    $('#loading').css('visibility','visible');
}

});
</script>

最后让您的php脚本处理任何页面请求，我想强调定义可接受值的白名单的重要性，否则您将开放自己的大范围本地文件包含漏洞。

load.php

// define your acceptable values for pages to avoid pains
$pages = array(1,2,3,4,5);
$directories = array("Browse","Top-albums","Top-artists","Top-lists","Charts");

if ((isset($_POST['page']) and in_array($_POST['page'],$pages)) and (isset($_POST['dir']) and in_array($_POST['dir'],$directories))  ){
    if(file_exists($_POST['dir'] . '/Browse_Page'.$_POST['page'].'.html'))
        echo file_get_contents('Browse/Browse_Page'.$_POST['page'].'.html');
}
else echo 'There is no such page!';

Answer 3

在审核了您的PHP代码之后，除了从静态HTML文件中读取内容之外，它似乎并没有做多少事情。 jQuery有一个有用的＃34; load＆＃34;如果您只想加载HTML内容，请执行此功能。

此外，您可以利用HTML5数据属性来存储要添加到页面中的HTML内容文件的路径。我看到你的问题的答案之一也是使用这种方法。也就是说，我建议通过简单地包含HTML内容的整个相对文件路径来更简单地解决问题。这样，您就内容文件结构的设置和维护方式提供了更大的灵活性。

我假设您没有任何特殊的安全要求。你的问题没有提及任何问题，你的代码也没有暗示这种需要。

以下是例子：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">

    (function($) {

      $(function() {
        $("header nav a").click(function() {
          var $this = $(this),
              loadFrom = $this.data("navigate-to"),
              fadeSpeed = 1000;

          $("header nav a").removeClass("active");
          $this.addClass("active");

          $("#loading").fadeIn(fadeSpeed, function() {
            $("#main-content").load(loadFrom, function(res, status, xhr) {
                if(status=="error") {
                  $("#main-content").html("Content couldn't be loaded.");
                }
            });
            $(this).fadeOut(fadeSpeed);
          });

        });
      });

    })(jQuery);

    </script>

  </head>
  <body>
    <header>
      <nav>
        <li><a href="#browse-page-1" data-navigate-to="/browse/page1.html" class="albums active">Browse</a></li>
        <li><a href="#top-albums-page-1" data-navigate-to="/top_albums/page1.html"  class="albums">Top Albums</a></li>
        <li><a href="#top-artists-page-1" data-navigate-to="/top_artists/page1.html" class="albums">Top Artists</a></li>
        <li><a href="#charts-page-1" data-navigate-to="/charts/page1.html" class="albums">Charts</a></li>
      </nav>
    </header>
    <div id="loading" style="display:none;">
      <p>
        Loading...
      </p>
    </div>
    <div id="main-content">

    </div>

  </body>
</html>

如何转换jquery ajax if else语句来切换语句

3 个答案: