简单的AJAX ~查看端口宽度到PHP变量

Question

我希望将屏幕宽度(viewport)传递给PHP变量。我不熟悉AJAX，但据我所知，这是正确的方法。

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

发布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']; ?>">