PHP의 부트 스트랩 진행 표시 줄

Question

일부 html과 PHP가있는 웹 페이지가 있습니다. PHP는 일부 리눅스 명령을 실행합니다. 다음 리눅스 명령이 실행될 때 진행되는 웹 페이지에 부트 스트랩 진행 막대를 넣고 싶습니다.

명령이 실행을 마칠 때마다 4 개의 linux 명령을 실행한다고 가정 해 봅시다. 진행률 막대가 25 % 더 진행되어야합니다.

웹을 검색했지만 필요한 항목을 찾을 수 없습니다. 어떤 제안?

만 지금까지 PHP/HTML 부분을 가지고 : 정말 당신이 특정에 필요에 따라

function progressbarStatus($width) { 

    echo " 
      <div class = 'container'> 

        <div class = 'progress progress-striped active'> 

          <div class = 'progress-bar' role = 'progressbar' aria-valuenow = '$width' aria-valuemin = '0' aria-valuemax = '100'style = 'width: $width%'></div> 

          </div> 

        </div> 

      </div> 
      "; 

} 

Answer 1

할 수있는 방법과 jQuery를하여 매우 간단한 형식으로 여기 입증를 참조;

PHP 페이지에 명령이있는 PHP 페이지에 AJAX 요청을 보내면 PHP 페이지는 json_encode(array('success'=>true));을 반환하고 수신 및 승인되면 진행률 표시 줄이 업데이트되고 다음 함수가로드되기 시작합니다.

나는 이것을 테스트하지 않았고 매우 거칠지 만 간단한 방법으로 사용할 수있는 기술을 보여줍니다.

$.getJSON('linkToLinuxCommand1.php').done(function(data) { 
    if (data.success === true) { 
     $('.progress').css('width', '25%'); 
     $.getJSON('linkToLinuxCommand2.php').done(function(data) { 
      if (data.success === true) { 
       $('.progress').css('width', '50%'); 
       $.getJSON('linkToLinuxCommand3.php').done(function(data) { 
        if (data.success === true) { 
         $('.progress').css('width', '75%'); 
         $.getJSON('linkToLinuxCommand4.php').done(function(data) { 
          if (data.success === true) { 
           $('.progress').css('width', '100%'); 
           alert('Done!'); 
          } 
         }); 
        } 
       }); 
      } 
     }); 
    } 
}); 

일부 의견;

• 만큼 리눅스 명령을 다시 PHP 얘기하지 않는 한, 당신은 단지
• 은 어쩌면 당신은
• 내가 '는 getJSON 요청에 더 많은 매개 변수를 추가하는 데 필요한 PHP 페이지의 done 상태를 얻을 수 있습니다 JSON이 부울 true 또는 false을 반환하는지 확실하지 않으므로 문자열과 같이 확인해야합니다. data.success === "true"
• 보관할은 무엇 data 수익률을 확인하여, (JSON을 반환에 대한 PHP 페이지 사용자 설정 후) console.log(data)
• 당신은 $('#button').click(function() {/* PLACE HERE */}); 같은 트리거 이러한 기능을 결합하고 재귀 함수에 모든 것을 배치 할 수 있습니다

Answer 2

합니다. 당신이 그것을 설명 할 때, 그것은 아약스를 통해 이루어져야합니다. 문제는 아약스가 응답 지연을 허용하지 않기 때문에 모든 작업에 대해 아약스 호출을해야한다는 것입니다.

는 http://api.jquery.com/jQuery.ajax/ 및 http://api.jquery.com/animate/