通过AJAX请求将视口和屏幕的宽度和高度值转换为PHP

Question

我想将视口和屏幕的宽度和高度值转换为PHP。 经过大量的搜索，我发现了此链接（ http://css-tricks.com/screen-resolution-notequalto-browser-window/ ）。

我尝试将其与下面的代码一起应用，但是我的问题是执行index.html之后没有将我重定向到body.php，因此我无法从index.html到body.php获得任何POST值。 我确定jquery.js已加载。 我还在jquery.js之后的标题部分尝试了该脚本。

看来我无法达成适当的要求。

不幸的是，我对javascript或AJAX编码一无所知。 我不想使用Google Analytics（分析）API。

我正在使用XAMPP进行PHP执行。

您能否以正确的建议来说明我哪里错了？ 谢谢大家

我的代码：

用于index.html

<!DOCTYPE HTML>
<html>
    <head>      
        <meta charset=utf-8>
        <title>my title</title>

        <!-- latest jquery library -->
        <script src="js/jquery.js"></script>
    </head>

<body>
        <script>
            $.ajax({
              type: "POST",
              url: "http://localhost/public_html/body.php",
              data: {
                width        : $(window).width(),
                height       : $(window).height(),
                screen_width : screen.width,
                screen_height: screen.height
              }
            });
        </script>
</body>
</html>

对于body.php

<?php
echo 'check print'.'<br />';

echo $_POST['width'].'<br />';
echo $_POST['height'].'<br />';
echo $_POST['screen_width'].'<br />';
echo $_POST['screen_height'].'<br />';
?>

Answer 1

您需要等到文档准备就绪后再尝试执行脚本。

$(function(){

    $.ajax({
        url: 'http://localhost/public_html/body.php',
        type: 'POST',
        dataType: 'html',
        data: {
            width        : $(window).width(),
            height       : $(window).height(),
            screen_width : screen.width,
            screen_height: screen.height
        }
    })
    .done(function(response) {
        alert(response);
    })
    .fail(function(error) {
        alert(error);
    })
    .always(function() {
        console.log("complete");
    });

});

Answer 2

检查控制台是否存在ajax相同的原始错误。 我的Google版本不允许localhost上的Ajax，直到明确地强制执行。

通过AJAX请求将视口和屏幕的宽度和高度值转换为PHP

问题描述

2 个解决方案

解决方案1
0 2014-01-21 19:39:27

解决方案2
0 2015-10-12 10:57:46

通过AJAX请求将视口和屏幕的宽度和高度值转换为PHP

问题描述

2 个解决方案

解决方案1 0 2014-01-21 19:39:27

解决方案2 0 2015-10-12 10:57:46

解决方案1
0 2014-01-21 19:39:27

解决方案2
0 2015-10-12 10:57:46