Question

我感觉这可能是会话锁定问题（参考Progress bar with PHP & Ajax） - 我花了大部分时间调试并搜索解决方案，所以寻找一些专家建议并告诉我将要发生什么以及如何解决它。这是我第一次参加会议论坛。

编辑：我尝试在会话var：

的每次更新周围添加以下内容

session_start();
$_SESSION['percentage']=floor(($count/$total) *100);
session_write_close();

并收到：

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent...
Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent...

谢谢。

我有3个文件：

firstFile.php，它接受表单数据，进行API调用，收集结果和传递给......
ajaxFile.php，它获取ajax数据并执行进一步的API调用并将结果输出到html表
progress.php，它访问会话变量“percentage”，将其设置为0或取消设置。

因为ajaxFile中的API调用可能需要几秒钟来处理，所以我实现了进度条UI，并根据会话变量“百分比”进行更新。

但是，只有ajaxFile完成后才会更新进度条。

代码如下。仅供参考，您可能会注意到一些奇怪的逻辑，当ajaxFile完成时将进度条设置为98％，然后增加到99＆amp; 100，但这只是我的调试工作。

firstFile.php

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    var progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );

    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "Complete!" );
      }
    });

    $('#myForm').submit(function() {     

      progressbar.progressbar({
        value: false,
        change: function() {        
          if(progressbar.progressbar( "value" )==false){        
            progressLabel.text('Loading...');
          }else{
            progressLabel.text( progressbar.progressbar( "value" ) + "%" );          
          }
        },
        complete: function() {
          progressLabel.text( "Complete!" );         
        }
      });
      var i = 0;
      var gArr = new Array ();
      var numberofloop=10;
      var increment=10;

      $( "#progressbar" ).progressbar( "option", "max", 100 );
      $( "#progressbar" ).show();

      for (var i=0;i<numberofloop;i+=increment){

        var url = "API call at some domain.com";
        var form=$(this).serialize();
        $.ajax({
          type: "GET",
          url: url,
          data: "",
          //async: false,
          dataType: "jsonp",
          success: function(data) {            
            process data and push into array gArr}

        if(gArr.length==(i/increment) ){    
          $.ajax({
            type: "POST",
            url: "ajaxFile.php",
            data: { gData : gArr },
            async: true,
        beforeSend: function( xhr ) {       
          ajaxprogress();     
        }           
              }).done(function(html) {              
                  jQuery('td#myFormResults').html(html);
          $( "#progressbar" ).progressbar( "option", "value", 98 );       
          show();                
                }); 
            }                     
      },
      error: function(data){      
          }
        });         
      }
      return false; 
    });      
  });

function ajaxprogress(){

    $.ajax({
      type: "POST",
      url: "progress.php",
      data: '',
      //async: true,
      dataType: "json",         
    }).done(function(html) {

        var progressbar = $( "#progressbar" ),
        progressLabel = $( ".progress-label" );     
        $( "#progressbar" ).progressbar( "option", "value", html.value );
        var val = progressbar.progressbar( "value" ) || 0;
        if ( val < 98 ) {  
          setTimeout( ajaxprogress, 10 );
        }                 
      }); 
  }

function show(){             
  if($( "#progressbar" ).progressbar( "value" )!='100'){
    var progressbar = $( "#progressbar" );
    var val = progressbar.progressbar( "value" ) || 0;    
    progressbar.progressbar( "value", val + 1 );
    setTimeout( show, 1000 );
  }else{
    var tab = jQuery('table#myFormTable');
    $( "#progressbar" ).hide();                                                  
    tab.show();
    }                
}

function sleep(delay) {
  var start = new Date().getTime();
  while (new Date().getTime() < start + delay);
}

function progress(time) {
  var progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" );
  var val = progressbar.progressbar( "value" ) || 0;
  progressbar.progressbar( "value", val + 1 );
  if ( val < 98 ) {
    setTimeout( progress, 100 );
  }
}

</script>
</head>
<body>

    <div id="progressbar" style="display:none;"><div class="progress-label">Loading...</div></div>      
    <div class="fl" name="bizParms" style="width:950px; height:50px;" >
      <form action="firstFile.php" id="myForm" method="get">
        <table>
      <tr>
            <td for various input boxes>
            <td><input type="submit" name="process" id="process" value="process" /></td>           
          </tr>
        </table>
      </form>
    </div>       

    <div>
      <table>
        <tr>
          <td id="myFormResults">
          </td>
        </tr>
      </table>
    </div>
  </div>

</body>
</html>

ajaxFile.php

  if (isset($_SESSION)) {
    session_start();
  }
  global  $total;
  global  $count;

  $count=0;
  $total=1;
  $_SESSION['percentage']=0;

    extract all required data from $_REQUEST and put into an array "nArr"

    $total=count($nArr);
    foreach ($nArr as $n) {

      $i++;

      // for every 10 elements in the array, make an API call
      if (($i %10 == 0)|| ($i == count($nArr))){
        make a new API query using parameters from nArr

        $apiResults = API call to some domain.com       
        $s = array();
        $s = $apiResults;        

        foreach ($s as $n) {
      $count++;

      $_SESSION['percentage']=floor(($count/$total) *100);
      $perc =floor(($count/$total) *100);

          echo the data returned from the API result into a table

        }    // foreach  

        sleep(1);  // space out the execution to test the progress bar

      }  // hit 10 results or end of array
    }  // foreach item in nArr 

  //unset($_SESSION['percentage']);
  $_SESSION['percentage']=100;

progress.php

session_start();
  if(isset($_SESSION['percentage'])){
    echo json_encode(array('value'=>$_SESSION['percentage']));
      if($_SESSION['percentage']>99){
        unset($_SESSION['percentage']);
      }
  }else{
    echo json_encode(array('value'=>0));
  }

js / php / ajax - 进度条在ajax调用完成之前不会更新

0 个答案: