如何让网站等待我的 ajax 文件发回一个值而不是打印 undefined？

Question

所以我有这个函数，我希望程序等待它返回一个值而不是给出未定义的值。function savedNumberOfLessonInDay(dayID){     var xhttp = new XMLHttpRequest();      xhttp.onreadystatechange = function() {          if (this.readyState == 4 && this.status == 200) {            document.getElementById('demo4').innerHTML = this.responseText; //Returns the right number            return this.responseText;        }      };      var PageToSendTo = "AJAX/countLessonInDay.php?";    var MyVariable = dayID;    var VariablePlaceholder = "GETDayID=";    var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable;      xhttp.open("GET", UrlToSend, false);      xhttp.send();   }<?phprequire '../notWebsite/dbh.php';session_start();$dayID = (int)$_GET['GETDayID'];$sqlCount = "SELECT COUNT(lessonID) FROM daylesson WHERE dayID = ?";  $stmt = mysqli_stmt_init($conn);  if(!mysqli_stmt_prepare($stmt, $sqlCount)) {   header("Location: ../GymnasieArbeteHemsida.php?error=countError");    exit();  }  else { mysqli_stmt_bind_param($stmt, "i", $dayID);//Puts in variable in question   mysqli_stmt_execute($stmt);//Executes the questionmysqli_stmt_bind_result($stmt, $result);//Binds the reuslt of the question to the variable $resultif(mysqli_stmt_fetch($stmt)){//If the result of the question can be recieved  echo $result;//Send the result to the website}        exit();  }  mysqli_stmt_close($stmt);  mysqli_close($conn); ?>  document.getElementById('demo').innerHTML = 'test' + savedNumberOfLessonInDay(number);此代码将 testundefined 返回给 demo，但将 16（这是我要的数字）返回给 demo4。如何让它返回 test16 而不是 testundefined？

Answer 1

你不能打电话savedNumberOfLessonInDay(number)来获取号码。您正在尝试使用 执行此操作return this.responseText;，但在对服务器的请求完成之前不会触发。

你可以使用 Promises 来解决这个问题。

function savedNumberOfLessonInDay(dayID){

     return new Promise((resolve) => {

     var xhttp = new XMLHttpRequest();

      xhttp.onreadystatechange = function() {

          if (this.readyState == 4 && this.status == 200) {

            document.getElementById('demo4').innerHTML = this.responseText; //Returns the right number

            resolve(this.responseText);

        }

      };

      var PageToSendTo = "AJAX/countLessonInDay.php?";

    var MyVariable = dayID;

    var VariablePlaceholder = "GETDayID=";

    var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable;

      xhttp.open("GET", UrlToSend, false);

      xhttp.send();

     });

   }

并用await它来称呼它：

  document.getElementById('demo').innerHTML = 'test' + await savedNumberOfLessonInDay(number);

或者，如果由于某种原因您不能使用await：

  savedNumberOfLessonInDay(number).then((response) => {

      document.getElementById('demo').innerHTML = 'test' + response;

  });

Answer 2

尝试使用 async/await 这里是如何使用它。https://javascript.info/async-await

Answer 3

函数 savedNumberOfLessonInDay() 不会等待 ajax 完成。所以需要在回调函数xhttp.onreadystatechange中设置demo的html。

在不改变你的实现太多的情况下，你可以简单地修改你的代码：

function savedNumberOfLessonInDay(dayID){

 var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

      if (this.readyState == 4 && this.status == 200) {

        document.getElementById('demo4').innerHTML = this.responseText; //Returns the right number

        document.getElementById('demo').innerHTML = 'test' + this.responseText;

    }

  };

  var PageToSendTo = "AJAX/countLessonInDay.php?";

var MyVariable = dayID;

var VariablePlaceholder = "GETDayID=";

var UrlToSend = PageToSendTo + VariablePlaceholder + MyVariable;

  xhttp.open("GET", UrlToSend, false);

  xhttp.send();

}

然后只需调用该函数而不是尝试设置

savedNumberOfLessonInDay(number);