PHP Streaming и jQuery

Как лучше всего отобразить или обработать большой результат на успех, ожидая phpto визуализации этого результата. Я хотел бы использовать jQuery, чтобы отправить форму, заставить PHP обработать ее и дать результат/обратную связь пользователям, пока они ждут (либо в div, либо в iframe…в примере ниже я использую iframe).

У меня есть костяк версии xhr, которую я нашел в интернете, но мне было интересно, есть ли лучший способ (я знаю, что есть jQuery, смешанный с этим:

function submitForm(){
    $('#report_iframe').attr('src','/tests/stream_ajax/blank_iframe.php'); 
     $("#report_modal").modal({backdrop: "static"});

       count=1;
         xhr = new XMLHttpRequest();
         xhr.open("GET", "/folder/ajax_result.php", true);
         xhr.onprogress = function(e) {
           count = count +1;

         $( "#report_iframe" ).contents().find( "#content_loader" ).text('this is jquery count' + count);
         }
         xhr.onreadystatechange = function() {
           if (xhr.readyState == 4) {
             //console.log("Complete = " + xhr.responseText);
            // alert("complete");

             document.getElementById("report_iframe").srcdoc=xhr.responseText;
           }
         }
         xhr.send();



};

Любая помощь ценится. Спасибо.

Джей Дойл

2 ответа

  1. В любом случае вы используете JQuery. Почему вы не используете jQuery ajax ?

    $.ajax({
             cache: false,
             async: true,
             type: "GET",
             url: '/folder/ajax_result.php',
    beforeSend:function()
    {
        count = count +1;
    },
    success:function(response)
    {
        document.getElementById("report_iframe").srcdoc=response;
    }
         });
    
  2. Я согласен с @Nandan, вы должны использовать jQuery Ajax, теперь для части обратной связи прогресса вы должны добавить EventListener для объекта xhr и отобразить его в вашем кадре, это было бы что-то вроде этого:

    $.ajax({
    
      xhr: function()
      {
        var xhr = new window.XMLHttpRequest();
    
        //Download progress
        xhr.addEventListener("progress", function(evt){
          if (evt.lengthComputable) {
            var count = evt.loaded / evt.total;
            $("#content_loader").html('this is jquery count ' +  count*100);
          }
        }, false);
        return xhr;
      },
      type: 'GET',
      url: "/folder/ajax_result.php",
      data: {},
      success: function(data){
        //Do something
      }
    });
    

    Для лучшего объяснения и получения дополнительной информации:
    Нажмите здесь

    Или здесь


    ОБНОВЛЕНИЕ:
    Вы также можете попробовать что-то подобное, это хорошо работает для прогресса загрузки

    $.ajax({
      type: 'GET',
      url: "/folder/ajax_result.php",
      data: {},
      xhrFields: {
        onprogress: function (e) {
         if (e.lengthComputable) {
           $("#content_loader").text("this is jquery count " + e.loaded / e.total * 100 + "%");
          }
        }
      },
      success: function(data){
        //Do something
      }
    });