从 PHP 获取值到 Javascript - 将 AJAX 值返回到函数

Question

mineTime.php我正在尝试创建一个函数，该函数将通过XMLHTTPRequest调用某个 PHP 文件 ( )并将其值返回给该函数。

目前我遇到了麻烦，因为它不工作，要么什么都不返回，要么返回 undefined 或 null，我不知道该怎么做。我认为这可能与 onload 事件有关。

mineTime.php

<?php

$miningTime = 3600;

echo json_encode($miningTime);

?>

小黄人.js

function GetTime() {

  var miningTime = null;

  var xhr = new XMLHttpRequest();

  xhr.onload = function() {

    miningTime = this.responseText;

  }

  xhr.open("GET", "../php/mineTime.php", true);

  xhr.send();

  return miningTime;

}

window.onload = function () {

    var timeToMine = parseInt(GetTime());

    console.log(timeToMine); // outputs: NaN

    var display = document.querySelector('#time'),

        timer = new CountDownTimer(timeToMine),

        timeObj = CountDownTimer.parse(timeToMine);

        ...*code continues*

提前致谢！

Answer 1

这是新程序员面临的一个常见问题，尤其是在处理 AJAX 调用时。即使是更有经验的程序员也很难掌握 AJAX 功能。重要的是要记住 AJAX 中的 A 代表什么，异步。这意味着主程序将继续运行，而另一个副程序将工作以完成一些其他任务，通常称为线程。在这种情况下，您试图miningTime通过从该异步调用中获取值来返回。因为该 AJAX 调用在与主程序不同的线程上运行，miningTime所以始终为空。为了正确实现这一点，您需要实现所谓的回调函数。回调函数是在异步程序完成其正在执行的操作时运行的函数。这是它的结构：&nbsp; &nbsp; function GetTime(callback) {&nbsp; &nbsp; &nbsp; var xhr = new XMLHttpRequest();&nbsp; &nbsp; &nbsp; xhr.onload = callback&nbsp; &nbsp; &nbsp; xhr.open("GET", "../php/mineTime.php", true);&nbsp; &nbsp; &nbsp; xhr.send();&nbsp; &nbsp; }&nbsp; &nbsp; function callbackFunction() {&nbsp; &nbsp; &nbsp; var timeToMine = parseInt(this.responseText);&nbsp; &nbsp; &nbsp; console.log(timeToMine); // outputs: NaN&nbsp; &nbsp; &nbsp; var display = document.querySelector('#time'),&nbsp; &nbsp; &nbsp; timer = new CountDownTimer(timeToMine),&nbsp; &nbsp; &nbsp; timeObj = CountDownTimer.parse(timeToMine);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...*code continues*}&nbsp; &nbsp; window.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; var callback = callbackFunction&nbsp; &nbsp; &nbsp; &nbsp; GetTime(callback)&nbsp;}请注意，在 Javascript 中，还有其他可能的处理方式。有些东西叫做Promisesas well as async/await。在我看来，这是最简单、最普通的方法。更新：因为你不能有一个带有时间参数的函数，你可以做的是传递一个对该函数的引用。引用函数有点像复制函数并将其粘贴到其他地方，而调用函数实际上是在运行它。您可以通过括号辨别两者。如果在函数名后加上左括号和右括号，则调用该函数，如果省略，则仅引用该函数。

Answer 2

另一种方法是使用 Promise（IE 不支持）function GetTime() {    return new Promise( (resolve, reject) => {        var miningTime = null;        var xhr = new XMLHttpRequest();        xhr.onload = function() {            resolve(this.responseText);        }        xhr.open("GET", "../php/mineTime.php", true);        xhr.send();    })}window.onload = async function () {    const data = await GetTime();    var timeToMine = parseInt(data);    console.log(timeToMine); // outputs: NaN    var display = document.querySelector('#time'),        timer = new CountDownTimer(timeToMine),        timeObj = CountDownTimer.parse(timeToMine);        ...*code continues*