简单 AJAX ~ 视口宽度为 PHP 变量

Question

我想将屏幕宽度（视口）传递给 PHP 变量。 我不熟悉 AJAX 但据我所知这是正确的方法。

我目前在本地服务器 (XAMPP) 中运行我的网站（编码 WordPress 主题），当我尝试将 JS 变量传递给 PHP 时出现以下错误。

POST http://localhost/ 404（未找到）

以下是代码的 AJAX 部分：

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

此外，我不想使用 jQuery，因为我在页脚上加载它 (jQuery)，并且需要首先应用基于视口的更改。

如果你能指导我解决这个问题，我将不胜感激

Answer 1

下面将获取当前屏幕宽度，保存为变量，使用 AJAX 将此变量发送到 PHP 然后它将根据 PHP 代码如何处理已发送的 AJAX POST 数据，使用 JSON 返回结果。

如果您希望它是动态的，请在 jQuery 脚本中替换第一行

 $(document).ready(function() {

和;

 $(window).on('resize', function() {

下面的代码，PHP 文件应该是一个单独的文件，所以它可以被 AJAX 获取。

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

Answer 2

所以我在不使用 AJAX 的情况下找到了解决我的问题的方法。所以我想将屏幕宽度传递给 PHP 变量，以便根据设备视口（台式机或平板电脑）更改我网站上的显示图像。

我发现这可以使用 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']; ?>">