responseText 为空，但在控制台上显示？答案

【问题标题】：responseText is empty, but shows on console?responseText 为空，但在控制台上显示？
【发布时间】：2016-11-11 13:05:50
【问题描述】：

这可能是一个愚蠢的错误，但我正在对 PHP 后端使用 JQuery ajax，我希望 PHP 脚本将进度发布回网页。

它看起来工作正常，但我无法获取 e.target.responseText 的内容。

如果我执行 console.log(e.target)，我会在控制台中获得 XMLHttpRequest 对象。我可以看到 responseText：“1 av 1500 linjer”

但如果我执行 console.log(e.target.responseText) 它是空的。

我是不是疯了？

这是我的功能：

$.ajax(
    {
        type: "POST",
        url: "modEcs/ajax/ecs.php?a=analyseExcel",
        processData: false,
        contentType: false,
        xhrFields: 
        {
        onprogress: function(e) 
        {               
            console.log(e.target);
            console.log(e.target.responseText);  
            }
        },
        success: function(data) 
        {

         },
         error: function (xhr, ajaxOptions, thrownError) { alert(xhr.statusText); }
    });

控制台中的数据：

XMLHttpRequest
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: function(e)
onreadystatechange: null
ontimeout: null
readyState: 4
response: "1 av 1500 linjer"
responseText: "1 av 1500 linjer"
responseType: ""
responseURL: "xxx"
responseXML: null
status: 200
statusText: "OK"
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false
XMLHttpRequest-prototype

【问题讨论】：

请向我们展示从console.log(e.target);返回的数据
我已经添加了
console.log(JSON.stringify(e.target)); 猜测responseText 不存在。
我现在无法对此进行测试，但我很确定您所看到的是查看控制台数据时的常见混淆。当您记录属性本身时，您正在记录一个原始值，因此它的 current 值被打印（空字符串）。当您记录整个对象时，您正在记录该对象的“实时”视图，因此当您在控制台中查看它时，请求已完成，因此您现在看到已完成的 responseText 值。跨度>
我不知道该属性是否要逐步更新，但如果不是，那么直接记录它时不会显示任何值，但记录整个对象时会出现因为该对象的“实时”视图。

标签： javascript jquery ajax xmlhttprequest

【解决方案1】：

progress 仅在 XMLHTTPRequest 期间触发，而不是在收到响应时结束

readyState 3: "Downloading; responseText holds partial data."

【讨论】：

那我为什么可以放console.log(e.target);在 onprogress 函数中，并获得带有数据的输出到控制台？
@johnohod 你会得到数据输出，因为你正在记录对象，当你在 XHR 完成后点击控制台查看它的属性时，它会被实时评估

【解决方案2】：

试试这个，

$.ajax({
     type: "POST",
     url: "modEcs/ajax/ecs.php?a=analyseExcel",
     processData: false,
     contentType: false,
     xhr: function(){
        var xhr = new window.XMLHttpRequest();
        // Handle progress
        xhr.addEventListener("progress", function(evt){
        //Do some progress calculations
          console.log(xhr.responseText);
     }, false);

   return xhr;
  },
  complete:function(){
    console.log("Request finished.");
  }
});

【讨论】：

那是你！但据我所见，它与我的功能完全相同。控制台.log(xhr.responseText);向控制台输出一个空行，但如果我执行 console.log(xhr)，则会向控制台输出一个 XMLHttpRequest 对象，其中包含 responseText 和我要显示的文本。
@johnohod 它是不同的。您没有在代码中使用 xhr 对象。如果它对你有用，请接受我的回答。
它的工作方式与我原来的功能完全相同。它没有解决任何问题。
@johnohod 尝试删除 if 条件。这很奇怪，因为当前的 xmlhttprequest 应该正在进行中

【解决方案3】：

显然onprogress 中会为空，因为服务器在执行过程中不会返回任何数据。您只能在成功功能中读取responseText。

您可以在控制台中看到responseText 的原因（即使您在onprogress 中调用了.log()），是因为服务器实际上已经返回了数据，并且也调用了success 函数，因为您正在记录整个对象使用 e.target，该对象可以随时更新，无论您在哪里记录它，控制台都会向您显示它的实时版本，而不是在控制台记录的确切时刻的版本。当对象改变时，它也会在控制台中的任何地方更新。但是target.responseText 是一个原语，它不是一个对象，当它改变时控制台不会更新它的值。

希望这对未来的读者有所帮助。

【讨论】：