Quiero pasar el ancho de la pantalla (ventana gráfica) a una variable de PHP. No estoy familiarizado con AJAX, pero según tengo entendido, esta es la forma correcta de hacerlo.
Ejecuto mi sitio web (Codificando un tema de WordPress) en un servidor local en este momento (XAMPP) y obtengo el siguiente error cuando intento pasar la variable JS a PHP.
POST http://localhost/ 404 (No encontrado)
A continuación se muestra la parte AJAX del código:
<?php // Handle AJAX request (start) if (isset($_POST['ajax']) && isset($_POST['name'])) { echo $_POST['name']; echo "test"; exit; } // Handle AJAX request (end) ?> <!-- Script --> <script> document.addEventListener("DOMContentLoaded", function() { var ViewPort = $(window).width(); console.log(ViewPort) $.ajax({ type: 'post', data: { ajax: 1, name: ViewPort }, success: function(response) { $('#response').text('name: ' + response); } }); }); </script>Además, no quiero usar jQuery ya que lo cargo (jQuery) en el pie de página y los cambios basados en la ventana gráfica deben aplicarse primero.
si me pudieras guiar en esto te lo agradeceria
A continuación, tomará el ancho de pantalla actual, guárdelo como una variable, envíe esta variable a través de PHP usando AJAX y luego devolverá resultados usando JSON en función de cómo el código PHP maneja los datos POST de AJAX que se han enviado.
Si desea que esto sea dinámico, en el script jQuery reemplace la primera línea
$(document).ready(function() {con;
$(window).on('resize', function() {El código a continuación, el archivo PHP debe ser un archivo separado para que AJAX pueda recuperarlo.
<?php header('Content-type: application/json'); $viewPort = $_POST['viewPort']; // You may want to protect this data using mysqli_real_escape_string // Viewports under 800px width if (($viewPort) < 800) { $response = "small"; } // Viewports over 800px width if (($viewPort) > 800) { $response = "large"; } // Allow front end to read result echo json_encode($response); ?> //jQuery script $(document).ready(function() { var viewPort = $(window).width(); console.log(viewPort); // Check we have the width $.ajax({ url:"somefolder/myPHPfile.php", // Referencing above PHP (should be a separate file) method:"POST", data:{viewPort:viewPort}, dataType:"json", success:function(a) { if (a == "small") { console.log("the viewport size is small"); // Do some other function ?? } if (a == "large") { console.log("the viewport size is large"); // Do some other function ?? } } }); });Entonces encontré una solución a mi problema sin usar AJAX. Así que quería pasar el ancho de la pantalla a una variable de PHP para cambiar las imágenes de visualización en mi sitio web en función de la ventana gráfica del dispositivo (escritorio o tableta).
Descubrí que esto se puede hacer usando srcset.
<img class="MainImage" src="<?php echo get_field('main_slider_image')['url']; ?>" srcset="<?php echo get_field('main_slider_image_mobile')['url']; ?> 835w, <?php echo get_field('main_slider_image')['url']; ?> 836w" alt="<?php echo get_field('main_slider_image')['alt']; ?>">