jquery .ajax 在处理时更新数据（在成功或完成之前）

Question

我正在尝试在处理时更新数据（在成功或完成之前）

.ajax 的 "success" 部分等待 php 完成...

在大多数情况下，等待 "success" 完全没问题。

但是更长php（比如在大文件上使用ffmpeg）等待时间太长并产生错误...

我有这个代码

$.ajax ({
    type: 'GET', 
    async: true, 
    url: '__/_/_path_to_PHP_file.php',
    dataType: 'html',
    data:'__POSTvariable1__='+encodeURIComponent (__POSTvariable1__)+
         '&__POSTvariable2__='+encodeURIComponent(__POSTvariable2__),
    cache: false,
    success: function(data){
        $('#div_that_needs_update').html(data);
    },
    error: function(request, status, error){
        console.log ( 'request.responseText --> ' + request.responseText + ' status --> ' + status + ' error --> ' + error );
    }
});

•••• 我尝试了 "complete" 或 "beforeSend"，但是否有 "whileLoading" 或类似的？？？

谢谢

Answer 1

我想你在找 xhr

$.ajax({
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total) * 100;
                    $("#status").html(Math.round(percentComplete)); 
                }
            }, false);
            //Upload progress
            xhr.upload.addEventListener("load", function(evt){

            }, false);
            xhr.upload.addEventListener("error", function(evt){
                $("#status").html("Upload Failed");
            }, false);
            xhr.upload.addEventListener("abort", function(evt){
                $("#status").html("Upload Aborted");
            }, false);
           return xhr;
        },
        url: .........

希望对您有所帮助

Answer 2

感谢您的回答（这是一个很好的开始）

我找到了这个页面：http://www.sitepoint.com/php-streaming-output-buffering-explained/

我想通了 ;) !!!!!

$.ajax ({
    type: 'GET', 
    async: true, 
    url: '__/_/_path_to_PHP_file.php',
    dataType: 'html',
    data:'__POSTvariable1__='+encodeURIComponent (__POSTvariable1__)+
         '&__POSTvariable2__='+encodeURIComponent(__POSTvariable2__),
    cache: false,
    xhr: function(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '__/_/_path_to_PHP_file.php', true);
        xhr.onprogress = function(e) {
           $('#div_that_needs_update').html(e.currentTarget.responseText);
         }
         return xhr;
    },
    success: function(data){
        console.log('completed');
    },
    error: function(request, status, error){
        console.log ( 'request.responseText --> ' + request.responseText + ' status --> ' + status + ' error --> ' + error );
    }
});

Answer 3

我把它定型得更简单更高效（带参数）

function liveXHR (p1 , p2) {
    var params = 'param1='+p1+'&param2='+p2;

    xhr = new XMLHttpRequest();
    xhr.open('GET', '__URL_OF_PHP___'+"?"+params, true);
    xhr.onprogress = function(e) {
        $('#__ID_DIV_forUpdate___').html(e.currentTarget.responseText);
    }
    xhr.onreadystatechange = function() { 
        if (xhr.readyState == 4) { 
            console.log('Complete'); 
            //or any onther stuff when done ;)
        } 
    }
    xhr.send();
};

jquery .ajax 在处理时更新数据（在成功或完成之前）

jquery .ajax update data WHILE processing (before success or complete)

ajax

jquery

loading

while-loop