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

Question

我正在尝试创建一个函数，该函数将通过 XMLHTTP 请求调用某个 PHP 文件 （），并将其值返回到此函数。mineTime.php

目前我遇到了麻烦，因为它不起作用，要么它什么都不返回，要么返回未定义或空值，我不知道该怎么办。我认为这可能与 onload 事件有关。

我的时间.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 代表什么，即异步。这意味着主程序将继续运行，而另一个侧程序将完成其他一些任务，通常称为线程。在此实例中，您尝试通过从该异步调用中获取值来返回。因为该 AJAX 调用在与主程序不同的线程上运行，因此 将始终为 null。miningTimeminingTime为了正确实现这一点，您需要实现所谓的回调函数。回调函数是在异步程序完成其正在执行的操作时运行的函数。它应该如何构建：&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 中，还有其他可能的方法来处理这个问题。有些东西被称为以及。在我看来，这是最简单，最普通的方法。Promisesasync/await更新：由于您不能使用具有时间参数的函数，因此您可以改为传递对该函数的引用。引用函数有点像复制函数并将其粘贴到其他位置，而调用函数实际上运行它。您可以通过括号来辨别两者。如果在函数名称后添加左括号和右括号，它将调用该函数，如果省略它们，则该函数将仅被引用。

Answer 2

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