PHP 不会在 JavaScript HTTP 请求的第一个页面加载时加载数据 - PHP won't load data on first page load at JavaScript HTTP request

我正在向PHP发送带有JavaScript HTTP请求的数据，我希望PHP将其保存在内存中。因此，我正在使用$_SESSIONS的。我这样做是因为我不想用JavaScript进行任何计算或HTML部署。

这是我将数据发送到PHP的方法：

/**
 * The PHP file which receives the data
 *
 * @type {string} The php filename
 */
const INSTALL_FILE = "install.php";
/**
 * Passes roadTaxData to the php install file which could be getData with the $_POST operator
 */
function passToPHP (paramName, data) {
    var httpc = new XMLHttpRequest(); // simplified for clarity"
    httpc.open("POST", INSTALL_FILE, true); // sending as POST
    httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    httpc.send(paramName + "=" + data);
}

我正在使用这样的方法：

/**
 * @type {string} The data which is getting send to PHP
 */
var data = "";
/**
 * Parses the road tax data and stores it into the data string as JSON format
 */
function parseRoadTaxData () {
    var object = {};
    /*
     Loop through all the road tax data
     */
    for (var vehicleFormatType in roadTaxData) {
        /*
         Define all vehicle types which belong to that vehicle type format
         */
        var vehicleTypes = roadTaxData[vehicleFormatType];
        /*
         Loop through all the vehicle types
         */
        for (var vehicleType in vehicleTypes) {
            /*
             Add the vehicle data to the JSON object
             */
            object[vehicleType.toLowerCase()] = vehicleTypes[vehicleType];
        }
    }
    /*
     Parse the javascript object (converted to JSON format) into the data string.
     */
    data = JSON.stringify(object);
}
/**
 * Gets the data which is going to be send to PHP
 *
 * @returns {string} The JSON data string
 */
function getData () {
    return data;
}
/*
 Call the function to parse all data into the HTTP query string
 */
parseRoadTaxData();
/*
 Call the function to pass the whole HTTP query to PHP in seperate $_POST variables
 */
passToPHP('road-tax_data', getData());

接收数据的install.php文件如下所示：它打开一个会话并将数据存储在RoadTaxDataTemporaryRegistry类中。

require "RoadTaxDataTemporaryRegistry.php";
/*
 * Start the session
 */
session_start();

RoadTaxDataTemporaryRegistry::store(json_decode($_POST['road-tax_data'], true));

我的RoadTaxDataTemporaryRegistry类如下所示：

/**
 * Storage for all road tax data
 */
class RoadTaxDataTemporaryRegistry
{
    /**
     * The character which gets and sets the specific $_SESSION
     */
    const SESSION_NAME = 'rtd';
    /**
     * Stores all data in a session
     *
     * @param $data array The data which is getting stored
     */
    public static function store ($data) {
        $_SESSION[self::SESSION_NAME] = $data;
    }
    /**
     * Gets the road tax data of a vehicle
     *
     * @param string $vehicle
     *
     * @return array
     */
    public static function getStorageByVehicle ($vehicle) {
        return $_SESSION[self::SESSION_NAME]["$vehicle"];
    }
}

此类只执行任何操作，只需将变量存储到特定的$_SESSION键中即可。

我的index.php如下所示：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="data/js-files/data_personen_auto.js" type="application/javascript"></script>
    <script src="js/road_tax_data_mapper.js" type="application/javascript"></script>
    <script src="js/utility.js" type="application/javascript"></script>
    <script src="js/data_parser.js" type="application/javascript"></script>
</head>
<body>
<?php  
    require "RoadTaxDataTemporaryRegistry.php";
    session_start();
    var_dump(RoadTaxDataTemporaryRegistry::getStorageByVehicle($myCar));
?>
</body>
</html>

我首先导入所有 JavaScript 脚本，这些脚本将数据发送到 PHP。

然后在我的 html 页面的正文中，我打开会话并调用并打印出我刚刚通过 HTTP 请求在该类中解析的数据。

问题

当我第一次在浏览器中打开它（通过我的 IDE PhpStorm 打开）时，我收到以下错误消息：

注意：未定义的索引：C：''Users''Bas.''Cars''RoadTaxDataTemporaryRegistry.php第30行中的rtd零

当我刷新页面时，数据将按应有的方式打印出来：

array(1) { ["noord_holland"]=> array(46) { [0]=> string(14) "1#26#90#26#101" [1]=> string(17) "551#34#109#34#124" [2]=> string(17) "651#42#129#42#147" [3]=> string(17) "751#55#154#55#175" [4]=> string(17) "851#73#189#87#203" [5]=> string(18) "951#94#223#123#238" [6]=> string(20) "1051#115#257#159#273" [7]=> string(20) "1151#137#290#195#309" [8]=> string(20) "1251#158#324#230#344" [9]=> string(20) "1351#180#358#266#379" [10]=> string(20) "1451#201#392#302#414" [11]=> string(20) "1551#222#426#338#449" [12]=> string(20) "1651#244#460#374#485" [13]=> string(20) "1751#265#494#409#520" [14]=> string(20) "1851#286#528#445#555" [15]=> string(20) "1951#308#562#481#590" [16]=> string(20) "2051#329#596#517#625" [17]=> string(20) "2151#351#630#553#661" [18]=> string(20) "2251#372#664#588#696" [19]=> string(20) "2351#393#698#624#731" [20]=> string(20) "2451#415#732#660#766" [21]=> string(20) "2551#436#766#696#801" [22]=> string(20) "2651#458#800#732#837" [23]=> string(20) "2751#479#834#768#872" [24]=> string(20) "2851#500#868#803#907" [25]=> string(20) "2951#522#902#839#942" [26]=> string(20) "3051#543#936#875#977" [27]=> string(21) "3151#564#969#911#1013" [28]=> string(22) "3251#582#1000#943#1044" [29]=> string(22) "3351#600#1030#975#1075" [30]=> string(23) "3451#617#1060#1006#1106" [31]=> string(23) "3551#634#1089#1038#1138" [32]=> string(23) "3651#651#1119#1070#1169" [33]=> string(23) "3751#669#1149#1102#1200" [34]=> string(23) "3851#686#1179#1133#1231" [35]=> string(23) "3951#703#1209#1165#1262" [36]=> string(23) "4051#720#1239#1197#1293" [37]=> string(23) "4151#738#1269#1228#1324" [38]=> string(23) "4251#755#1298#1260#1355" [39]=> string(23) "4351#772#1328#1292#1386" [40]=> string(23) "4451#790#1358#1324#1418" [41]=> string(23) "4551#807#1388#1355#1449" [42]=> string(23) "4651#824#1418#1387#1480" [43]=> string(23) "4751#841#1448#1419#1511" [44]=> string(23) "4851#859#1477#1450#1542" [45]=> string(23) "4951#876#1507#1482#1573" } }

问题

如何使页面自动加载数据而无需刷新页面？

我自己的尝试

我已经把这个JavaScript代码放到我的passPHP()函数中：

httpc.onreadystatechange = function () { //Call a function when the state changes.
    if (httpc.readyState == 4 && httpc.status == 200) { // complete and no errors
        window.location.href = "index.php";
    }
};

这会自动刷新页面，但这会变慢，您实际上看到的页面显示未定义数组索引。

注意：我不想使用 jQuery

一旦前一个请求返回，我应该再次使用 AJAX 加载值。

流程：

使用 AJAX 将数据发布到会话中，方法是parseRoadTaxData
将事件处理程序附加到该 AJAX 调用onreadystatechange
等待4 readystate，然后进行新的 AJAX 调用，现在通过运行RoadTaxDataTemporaryRegistry::getStorageByVehicle($myCar)的 PHP 文件检索会话数据

使用 onreadystate 扩展 AJAX 调用

function setAndLoadData(INSTALL_FILE, paramName , data)
{
    var httpc = new XMLHttpRequest(); // simplified for clarity"
    httpc.open("POST", INSTALL_FILE, true); // sending as POST
    httpc.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    httpc.onreadystatechange = retrieveVarsFromPHP //<-- call this on readystatechange.
    httpc.send(paramName + "=" + data);
}
function retrieveVarsFromPHP()
{
    if (this.readyState == 4)
    {
         //AJAX call to retrieve data.
         var httpc = new XMLHttpRequest(); // simplified for clarity"
         httpc.open("get", retrieveSessionData.php, true);
         httpc.onreadystatechange = function()
         {
             if (this.readyState == 4)
             {
                 sessionData = JSON.parse(this.responseText); //Store the data in a global, which can be accessed in the index.html
                 callBack() //this can be a function in your page called upon to handle displaying the retrieved data.
             }
         } 
         httpc.send();
    }
}

PHP 文件retrieveSessionData.php

<?php
require "RoadTaxDataTemporaryRegistry.php";
session_start();
echo (RoadTaxDataTemporaryRegistry::getStorageByVehicle($myCar));
?>

在索引上执行.php

 <script>
      setAndLoadData();
 </script>

检索数据的问题在于AJAX asynchronous部分。当PHP开始解析数据时，数据尚未真正设置。您需要等待此操作完成。页面的刷新是朝这个方向的暗示，但您仍然不能依赖它。因为页面完成加载的事实并不能说明除了页面加载之外运行的异步 AJAX 调用已完成的事实。

我希望我说得有道理。