Ajax和会话变量？Worksafe过滤器(选择性图像隐藏)

Question

Ajax和会话变量？Worksafe过滤器(选择性图像隐藏)

Lee*_*xon 5 javascript php ajax session session-variables

我正在建立一个摄影作品集.我的一些图像有裸露,所以我想默认隐藏它们,直到用户点击"Toggle Worksafe模式"按钮.

我可以用标准form post(和会话)来做,但是当用户back或reloads 时,这会导致"确认表单重新提交"错误.我试图找出一个AJAX post避免这种情况.

更新:这是工作代码.请注意,这不适用于"苗条"的jQuery发行版; 这是我遇到麻烦的主要原因之一.

图像索引页面:

<?php
    session_start();
    if (!isset($_SESSION['Worksafe_Mode'] {
        $_SESSION['Worksafe_Mode'] = 1;
    }
?>
<!-- other page content -->
<script src="scripts/jquery-3.2.1.min.js"></script>
<!-- other page content -->
<button type="button" id="Worksafe_Button" name="Worksafe_Button">
    Toggle Worksafe Mode
</button>
<script>
    $('#Worksafe_Button').click(function() {
        $.post("worksafe_mode_toggle.php")
            .done(function(data) {
                window.location.href = window.location.href;
        });
    });
</script>
<!-- other page content -->
<?php
$Connection = Connect();
$query = mysqli_query($Connection, 'SELECT uri, name, nsfw FROM images ORDER BY uri');

while($row = mysqli_fetch_assoc($image)) {
    if ($_SESSION['Worksafe_Mode'] == 1 && $row['nsfw'] == 1) {
        echo 'If you are over 18, toggle Worksafe Mode to view this image';
    }
    else {
        echo '<img alt="'.$row['title'].'" src="../'.$row['uri'].'/s.jpg" srcset="../'.$row['uri'].'/m.jpg 2x">';
    }
}
?>

Run Code Online (Sandbox Code Playgroud)

worksafe_mode_script:

session_start();
if (isset($_SESSION['Worksafe_Mode'])) {
    if ($_SESSION['Worksafe_Mode'] == 1) {
        $_SESSION['Worksafe_Mode'] = 0;
    }
    else {
        $_SESSION['Worksafe_Mode'] = 1;
    }
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

K S*_*ett 4

我认为 ajax 对于你的情况来说是一个很好的方法。

我可能会做一些事情，比如默认显示一页 SFW 图像以及切换按钮。

当他们单击该按钮时，它会触发向后端设置/取消设置中的会话值的 ajax 请求toggleWorksafe.php。最后触发页面刷新。

在页面刷新期间，PHP 代码检查会话变量是否已设置并显示已过滤或未过滤的图像集，并更改按钮的文本以匹配。

实施：

在该部分中包含 jQuery <head>（jQuery 简化了 ajax 调用）：

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>

<body>
  <?php
    session_start();
    if (!isset($_SESSION['Worksafe_Mode'])) {
        $_SESSION['Worksafe_Mode'] = 'yes';
    }
  ?>

  <button id="workSafe" type="button" name="Worksafe_Toggle_Button">
  <?php 
    if ($_SESSION['Worksafe_Mode'] == 'no') {
      echo 'Hide NSFW images';
    }
    else {
      echo 'Include NSFW images';
    }
  ?>
  </button>

  <!-- display safe images by default -->
  <?php 
    if ($_SESSION['Worksafe_Mode'] == 'no') {
      echo '<br/><br/>Showing NSFW images';
    }
    else {
      echo '<br/><br/>Showing safe images only';
    }
  ?>

  <!-- any other page content here -->

  <script>
    $('#workSafe').click(function() {

      // ajax request to page toggling session value
      $.post("/toggleWorksafe.php")
        .done(function(data) {
          window.location.href = window.location.href; // trigger a page refresh
        });
    });
  </script>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

切换工作安全.php：

<?php 
    session_start();
    if (isset($_SESSION['Worksafe_Mode'])) {
        if ($_SESSION['Worksafe_Mode'] == 'yes') {
            $_SESSION['Worksafe_Mode'] = 'no';
        }
        else {
            $_SESSION['Worksafe_Mode'] = 'yes';
        }
    }
    else {
        $_SESSION['Worksafe_Mode'] = 'yes';
    }
?>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，10 月前
查看次数：	216 次
最近记录：	8 年，10 月前