Ajax & 会话变量？ Worksafe Filter（选择性图像隐藏）

Question

我正在建立一个摄影作品集。我的一些图片有裸体，所以我想默认隐藏这些图片，直到用户单击 "Toggle Worksafe Mode" 按钮。

我可以使用标准 form post（和会话）来完成，但是当用户 backs 或 reloads。我试图找出 AJAX post 来避免这种情况。

更新：这是工作代码。请注意，这不适用于 "slim" 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">';
    }
}
?>

worksafe_mode_script:

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

Answer 1

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

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

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

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

实施：

在 <head> 部分中包含 jQuery（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>

toggleWorksafe.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';
    }
?>

Answer 2

有几种方法可以做到这一点，这与您如何隐藏或加载图像有关。

1。简单方法

如果你不关心用户的年龄，只需要切换，那么你可以只用一个js变量，一个cookie，两个版本的link。这样，您就不会隐藏图像，而是加载它们。过滤在服务器中完成，您可以在服务器中使用数据库查询或简单的文件夹分离。例如：

var nsfw = read_cookie('nsfw', false); // not an actual js function, search for how to read cookie in js --- read cookie value, default to false

function loadImage(nsfw){
    if (nsfw){
        $.get('nsfw-image-list-url', function(resp){
            // the url should return a json with list of image urls
            var list = resp;  // jQuery automatically parse json with the right MIME
            list.forEach(function(val){
                // insert image to page
                $('#container').append('<img src="' + val + '/>');
            });
        });
    } else {
        $.get('sfw-image-list-url', function(resp){
            // the url should return a json with list of image urls
            var list = resp;  // jQuery automatically parse json with the right MIME
            list.forEach(function(val){
                // insert image to page
                $('#container').append('<img src="' + val + '/>');
            });
        });
    }
}

在你的按钮点击事件中：

nsfw = !nsfw;
// clear the image first if needed
$('#container').empty();
loadImage(nsfw);

2。另一种简单的方法，但不像#1

那么简单

你也可以只用一个 link 来做到这一点 returns 具有它的类型的图像列表，例如 nsfw 或其他东西。

注意：此方法仍然使用cookie

例如返回的列表是这样的：

[
    {"url": "some-image-1.jpg", "nsfw": "true"}, 
    {"url": "some-image-2.jpg", "nsfw": "false"}, 
    {"url": "some-image-3.jpg", "nsfw": "true"}, 
    {"url": "some-image-4.jpg", "nsfw": "false"}, 
    {"url": "some-image-5.jpg", "nsfw": "false"}, 
    {"url": "some-image-6.jpg", "nsfw": "true"}
]

那么你只要满足条件就渲染它。

function renderImage(nsfw){
    $.get('image-list-url', function(resp){
        list.forEach(function(val, key){
            if (nsfw || !val.nsfw){
                $('#container').append('<img src="' + val.url + '/>');
            }
        });
    });
}

以及许多其他太长无法解释的方法，例如使用 Angular、React 或 Vue

在重新加载或返回之间仍然使用 cookie，并且不考虑用户的年龄。

至于基于会话的方法，只有在需要验证用户年龄时才需要

也就是说，如果您的网站具有包含 DOB（出生日期）数据的会员功能，如果是这样，您可以使用@KScandrett 的回答

Answer 3

确认重新提交表单是因为您在成功提交表单后没有执行重定向。

查看此 wiki 页面，了解正确的操作方法。 https://en.wikipedia.org/wiki/Post/Redirect/Get

Ajax & 会话变量？ Worksafe Filter（选择性图像隐藏）

Ajax & Session Variables? Worksafe Filter (selective image hiding)

javascript

php

ajax

session

session-variables

1。简单方法

2。另一种简单的方法，但不像#1

以及许多其他太长无法解释的方法，例如使用 Angular、React 或 Vue

至于基于会话的方法，只有在需要验证用户年龄时才需要