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

"success"콜백 함수 블록으로 줄을 이동하십시오.

AJAX 요청 호출 또는 기본 XMLHttpRequestObject (XHR) 호출이 비동기 적으로 실행됩니다. "로드"는 호출 스크립트에 실행 진행 상황을 알리는 레벨 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이 null이 있는지 확인합니다. 그렇다면 브라우저에 레벨 3 AJAX 지원이 없습니다.