用 PHP 和 AJAX 编写代码来记录用户的屏幕尺寸答案

【问题标题】：Writign a code in PHP and AJAX thar records users screen sizes用 PHP 和 AJAX 编写代码来记录用户的屏幕尺寸
【发布时间】：2020-07-11 06:55:03
【问题描述】：

我正在编写一个代码来记录用户的屏幕大小，然后将他们重定向到另一个网站，但似乎无法正常工作。我不知道错误在哪里，因为我已经多次修改了语法，一切似乎都很好。这是使用的代码示例：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>My Title</title>
    <link rel="shortcut icon" href="./Logo.png"/>
  </head>
  <body onload="process()">
    <script>
    var xmlHttp = createXmlHttpRequestObject ();
    function createXmlHttpRequestObject () {
      var xmlHttp;
      // if running Internet Explorer 6 or older
      if (window.ActiveXObject) {
        try {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
          xmlHttp = false;
        }
      } else {
        try {
          xmlHttp = new XMLHttpRequest();
        }
        catch (e) {
          xmlHttp = false;
        }
      }
      if (!xmlHttp)
        alert ("Error creating the XMLHttpRequest object.");
      else
        return xmlHttp;
    }
    function process () {
        height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        xmlHttp.open("POST", "screenRecorder.php", true);
        xmlHttp.onreadystatechange = handleRequestStateChange;
        xmlHttp.send("height=" + height + "&width=" + width);
      } else
        setTimeout('process()', 1000);
    }
    function handleRequestStateChange () {
      if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
          try {
            HandleServerResponse();
          } catch(e) {
            alert("Error reading the response: " + e.toString());
          }
        }
      }
    }
    function HandleServerResponse () {
      if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
          var response = xmlHttp.responseText;
          if (response == 'OK') {
            window.location.replace("My URL");
          } else {
            setTimeout('process()', 1000);
          }
        }
      }
    }
    </script>
  </body>
 </html>

还有screenRecorder.php

<?php
    class DB {
      private static function connect () {
        $pdo = new PDO('mysql:host=myhost;dbname=mydbname;charset=utf8', 'myusername', 'mypassword');
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        return $pdo;
      }
      public static function query ($query, $params = array()) {
        $statement = self::connect()->prepare($query);
        $statement->execute($params);
        if (explode(' ', $query)[0] == 'SELECT') {
        $data = $statement->fetchAll();
        return $data;
        }
      }
    }
    $height = $_POST['height'];
    $width = $_POST['width'];
    if (!empty($height) && !empty($width)) {
        DB::query('INSERT INTO screens VALUES(:height, :width)', array(':height'=>$height, ':width'=>$width));
        echo 'OK';
    } else {
        echo 'NO';
    }
?>

【问题讨论】：

除了调用 var createXmlHttpRequestObject()，我没有看到你的代码做任何其他事情。
我已经编辑了代码，但还是不行

标签： javascript php html ajax web

【解决方案1】：

我刚刚发现添加以下行可以解决问题：

xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

【讨论】：

【解决方案2】：

您的 JS 代码永远不会运行。您需要在您的 JS 代码末尾添加process();。

【讨论】：

我已经通过将 onload="process()" 添加到 body 元素来编辑代码，但仍然无法正常工作
我认为问题在于 xmlHttpRequest 的 send() 方法，因为 PHP 文件没有获取任何 $_POST 参数
@ScientificMaster 这行 JS 是否曾经执行过：xmlHttp.send("height=" + height + "&width=" + width);？您是否尝试过在该行之前和之后致电console.log()？
console.log 在它之前和之后执行，但不向 screenRecorder.php 发送任何内容
这是我输入console.log(response)后得到的结果；
注意：未定义索引：C:\xampp\htdocs\RecordScreenSize\screenRecorder.php 中 17 行中的高度

注意：未定义索引：C:\xampp\htdocs\RecordScreenSize\screenRecorder.php 中的宽度在第 18 行
没有