Return 来自网络服务器的数据 ajax

Question

我使用此代码通过 ajax 上传文件。

$('form').submit(function(e) {
  e.preventDefault();
  var fd = new FormData(this);
  $.ajax({url: $(this).attr('action'),
          xhr: function() { // custom xhr (is the best)
    var xhr = new XMLHttpRequest();
    //load
    xhr.upload.addEventListener("load", function(evt) {
      $("#msg").text(evt.target.responseText);
    }, false);
    return xhr;
  },
  type: 'post',
  processData: false,
  contentType: false,
  data: fd,
  success: function(data) {
    // do something...    
  }});
});

我想在上传完成后在#msg div 中显示一条消息。使用 php 在服务器端打印消息。通常 evt.target.responseText 包含来自服务器的数据，但它包含 [object XMLHttpRequestProgressEvent]（这又被写入 #msg）。我尝试打印 evt.responseText 和 evt.response，但两者都打印 return [object XMLHttpRequestProgressEvent].

Answer 1

将行移动到 "success" 回调函数块。

AJAX 请求调用或其底层 XMLHttpRequestObject (XHR) 调用异步执行。 "load" 是通知调用脚本执行进度的 3 级事件。可以针对文件上传器进度条等用例查询 evt 对象。

"success"事件映射到readyState==4，由onreadystatechange回调函数检查

使用原始 XHR：

xhr = new XMLHttpRequest();
xhr.open('GET', your_url, true);
xhr.onreadystatechange=function(){
  if (xhr.readyState==4){
    document.getElementById('res').innerHTML=xhr.responseText;
  } else {
    document.getElementById('res').innerHTML='loading...';
  }
}

xhr.send(null);

实际上，您可以在 XHR 调用之前显示加载文本。

跟踪文件上传进度不同：

xhr.upload.onprogress=function(e){
    if (e.lengthComputable)
       document.getElementById('res').innerHTML=Math.round(e.loaded*100/e.total)+'%';
    else document.getElementById('res').innerHTML='uploading...';
};

xhr.onload=function(e){
  //display success message
}

确保 xhr.upload 不为空。如果是，那么您的浏览器不支持 Level 3 AJAX。

Return 来自网络服务器的数据 ajax

Return data from webserver with ajax

php

ajax

jquery