簡單 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']; ?>">