在javascript / jquery上基于xhttp.readyState更改元素文本

Question

我有一个按钮，用户单击该按钮并从PHP页面下载，因为处理时间有点长，所以我想显示一个文本，向用户显示其请求正在处理中，我发现可以访问onreadystatechange属性，所以也许我可以用它来完成任务。

ready StateHolds the status of the XMLHttpRequest.
     0: request not initialized
     1: server connection established
     2: request received
     3: processing request
     4: request finished and response is ready

我的代码在下面，我可以获取readyState == 4但无法获取readyState == 3 ，任何建议都很棒！

<button type="submit" class="btn btn-primary" id="weekDL">
  <i class="fa fa-download"></i> 
  Download
</button>
<p id="please">Generating report, please wait..</p>

$('#weekDL').on('click',function(){
  $(this).hide();
  $('#please').show();
  var data = $("#week option:selected").text();

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 3) {
      $('#please').text('Request recieved..');
    } else if (this.readyState == 4 && this.status == 200) {
      window.location = "PHPexcel/download.php?week=" + data;
      this.responseText;
      $('#please').hide();
      $('#weekDL').show();
    }
  };
  xhttp.open("GET", "PHPexcel/download.php?week=" + data, true);
  xhttp.send(); 
});
});

Answer 1

您的代码运行正常。 问题是因为状态3在状态4发生之前仅存在几毫秒（取决于响应的大小），因此您的UI更新几乎是不可察觉的。

您可以通过放置console.log('state: ' + this.readyState); 在onchangereadystate处理程序中。 然后，您将在控制台中看到所有4个状态的输出。

工作实例

当然，这是假设AJAX请求正在返回有效响应。 如果请求中有错误，那么您只会看到状态1和4。但是，在这种情况下，问题出在请求中的逻辑上，而不是您的JS。