Ajax 和会话变量？工作安全过滤器（选定的图像隐藏）

Posted 2023-02-24

技术标签:

【中文标题】Ajax 和会话变量？工作安全过滤器（选定的图像隐藏）【英文标题】：Ajax & Session Variables? Worksafe Filter (selective image hiding) 【发布时间】：2017-12-02 02:02:54 【问题描述】：

我正在建立一个摄影作品集。我的一些图像有裸露，所以我想默认隐藏这些图像，直到用户单击“切换工作安全模式”按钮。

我可以使用标准的formpost（和会话）来做到这一点，但是当用户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  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;

【问题讨论】：

【参考方案1】：

我认为 ajax 在你的情况下是一个很好的方法。

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

当他们点击按钮时，它会触发一个 ajax 请求到后端设置/取消设置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';
    
?>

【讨论】：

谢谢！这就是我的想法。不过，它并不完全有效。我修复了小错误（重复的foreach 条件并省略了session_start()）。我不确定您所拥有的“toggleWorksafe.php”是否正确，或者是否需要提及单击事件创建的$_POST 变量。我根据您的想法使用更新的代码编辑了问题，如果您再看一下，我将不胜感激。还要提防window.location.reload()，它需要从服务器刷新而不是浏览器的缓存。 ***.com/a/41042549/1544886 我已经下载了 XAMPP，测试并修复了答案中的代码。它现在可以正常工作。是否应设置“工作安全模式”完全在后端确定，因此将任何数据传递给toggleWorksafe.php 毫无意义，只需像我上面所说的那样进行 ajax 调用。还要注意我在使用location.reload() 时提到的问题，除非您找到特定的用例，否则最好坚持使用我使用的内容。最后，请注意您在代码开头缺少几个右括号 - if (!isset($_SESSION['Worksafe_Mode'] 。非常感谢您的努力！！现在这对我来说非常有效。除了我遇到的拼写错误和其他问题外，主要问题是这不适用于我使用的“slim”jQuery 发行版。【参考方案2】：

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

1。简单的方法

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

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那么简单

您也可以只使用一个链接来执行此操作，该链接返回具有其类型的图像列表，例如 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 + '/>');
            
        );
    );