Ajax y variables de session? Filtro de security de trabajo (ocultación selectiva de imágenes)

Estoy construyendo un portafolio de fotografía. Algunas de mis imágenes tienen desnudos, por lo que quiero ocultarlas de forma pnetworkingeterminada hasta que el usuario click el button "Alternar modo de security en el trabajo".

Puedo hacerlo con una post form estándar (y sesiones), pero eso causa errores de "confirmación de presentación de formulario" cuando el usuario back o reload s. Estoy intentando descubrir una post AJAX para evitar eso.

ACTUALIZACIÓN: Este es el código de trabajo. Tenga en count que esto NO funciona con la distribución jQuery "delgada"; esa es una de las razones principales por las que tuve problemas.

Página de índice de image:

 <?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; } } 

Creo que ajax es un buen enfoque en tu caso.

Podría hacer algo como mostrar una página de imágenes SFW como el valor pnetworkingeterminado, junto con el button de alternar.

Cuando hacen clic en el button, desencadena una request ajax al back-end que establece / toggleWorksafe.php valor de la session en toggleWorksafe.php . Finalmente, desencadena una actualización de página.

Durante la actualización de la página, el código PHP verifica si la variable de session está configurada y muestra el set de imágenes filtradas o no, y cambia el text del button para que coincida.

Para implementar:

Incluye jQuery en la sección <head> (jQuery simplifica la llamada 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'; } ?> 

Hay un par de forms de hacerlo y relacionadas con la forma en que ocultas o cargas tus imágenes.

1. método simple

Si no te importa la edad del usuario, y solo tienes que alternar, puedes hacerlo solo con una variable js, una cookie y dos versiones de enlace. con esto, no ocultas las imágenes, sino que las cargas . el filtrado se realiza en el server, donde puede usar la consulta de la database o una separación simple de la carpeta. por ejemplo:

 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 + '/>'); }); }); } } 

y en su button click evento:

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

2. otro método simple, pero no tan simple como el # 1

también puede hacerlo con un solo enlace que devuelve una list de imágenes con el tipo de ella, como nsfw u otras cosas.

nota: este método todavía usa cookies

por ejemplo, la list devuelta es así:

 [ {"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"} ] 

entonces lo renderizas cuando se cumplen las condiciones.

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

y muchos otros methods que son demasiado largos para explicar, como el uso de Angular, React o Vue

todavía usa cookies durante las recargas o respaldos, y no considera la edad del usuario.

en cuanto al enfoque basado en sesiones, solo lo necesita si necesita verificar la edad de los usuarios

es decir, si tiene una funcionalidad de membresía con datos de date de nacimiento (DOB) en su sitio, de ser así, puede usar la respuesta de @KScandrett.

Confirme que se vuelva a enviar el formulario porque no realiza un redirect después de un envío exitoso del formulario.

Echa un vistazo a esta página wiki para ver cómo hacerlo bien. https://en.wikipedia.org/wiki/Post/Redirect/Get