使用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，但都返回[object XMLHttpRequestProgressEvent]。

Answer 1

将行移至“成功”回调函数块。

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

“成功”事件映射到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 不为空。如果是，那么您的浏览器没有 3 级 AJAX 支持。