jquery.progressbar 사용

도입 해 야 할 js 파일 은:jquery.progressbar.min.js 입 니 다.물론 jquery 는 필수 입 니 다.여기에 jquery.min.js 를 도입 하고 Ajax 는 prototype 을 사용 하기 때문에 prototype 을 도입 합 니 다.mini.js。
여기 서 분석 임무 가 매우 길다 고 가정 하면 웹 페이지 에서 진도 표 로 분석 진 도 를 보 여 줘 야 한다.실현 에 있어 웹 서버 는 이 임 무 를 유일 하 게 표시 해 야 합 니 다.여 기 는 생 성 된 uid 를 사용 하여 유일한 표지 임 무 를 사용 합 니 다.

  
  
  
  

   
   
   
   
<% 
   
   
   
   
    String uuid4analyze = java.util.UUID.randomUUID().toString();  
   
   
   
   
%> 
   
   
   
   
     
   
   
   
   
<script> 
   
   
   
   
            var progress_key_analyze = '<%= uuid4analyze %>'; 
   
   
   
   
                     
   
   
   
   
            // this sets up the progress bar 
   
   
   
   
            jQuery(document).ready(function() { 
   
   
   
   
                jQuery("#analyzeprogressbar").progressBar();
   
   
   
   
 //           
   
   
   
   
                jQuery("#analyzeprogressbar").hide(); 
   
   
   
   
            }); 
   
   
   
   
             
   
   
   
   
  
   
   
   
   
            // fades in the progress bar and starts polling the upload progress after 1.5seconds 
   
   
   
   
            function beginAnalyze() { 
   
   
   
   
                // uses ajax to poll the uploadprogress.php page with the id 
   
   
   
   
                // deserializes the json string, and computes the percentage (integer) 
   
   
   
   
                // update the jQuery progress bar 
   
   
   
   
                // sets a timer for the next poll in 750ms 
   
   
   
   
                jQuery("#analyzeprogressbar").fadeIn();  
   
   
   
   
                
   
   
   
   
 //            
   
   
   
   
                var i = setInterval(function() {  
   
   
   
   
                 
   
   
   
   
                    //    ，jQuery.ajax  jQuery.getJSON        ！！！ 
   
   
   
   
                    new Ajax.Request("analyzeSrcStructure.action",  
   
   
   
   
                    {  
   
   
   
   
                        method:'POST', parameters: "uuid=" + progress_key_analyze + "&profileId=${fiBean.appProfile.id}", 
   
   
   
   
                        onComplete: function(httpRequest){ 
   
   
   
   
                            var jsonText = httpRequest.responseText; 
   
   
   
   
                            var data = eval('(' + jsonText + ')'); 
   
   
   
   
                             
   
   
   
   
                            if (data == null) { 
   
   
   
   
                                clearInterval(i); 
   
   
   
   
                                
   
   
   
   
//       ，       
   
   
   
   
                                //jQuery('#src_structure_tree').jstree('refresh',-1); 
   
   
   
   
                                return; 
   
   
   
   
                            } 
   
   
   
   
          
   
   
   
   
                            var percentage = Math.floor(100 * parseInt(data.analyzed) / parseInt(data.total)); 
   
   
   
   
                             
   
   
   
   
                            if (parseInt(data.analyzed) == 100) 
   
   
   
   
                            { 
   
   
   
   
                                jQuery("#analyzeprogressbar").progressBar(100); 
   
   
   
   
                                //            
   
   
   
   
 jQuery("#analyzeinfo").html(data.currCls); 
   
   
   
   
                                clearInterval(i); 
   
   
   
   
                                jQuery('#src_structure_tree').jstree('refresh',-1);  
   
   
   
   
                                return; 
   
   
   
   
                            } 
   
   
   
   
                            else 
   
   
   
   
                            { 
   
   
   
   
                                jQuery("#analyzeprogressbar").progressBar(percentage); 
   
   
   
   
                                //            
   
   
   
   
 jQuery("#analyzeinfo").html(data.currCls); 
   
   
   
   
                            } 
   
   
   
   
                        } 
   
   
   
   
                    }); 
   
   
   
   
                }, 1500); 
   
   
   
   
            } 
  
  
  
  

핵심 코드 는 위 와 같은 코드 입 니 다.물론 서버 는 진도 값 이 있 는 json 형식의 데 이 터 를 전달 해 야 합 니 다.그리고 jquery 의 진도 항목 은 span 입 니 다.
 
여기에 문제 가 하나 있 는데,매우 수상 하 다.최초의 실현 은 jQuery.ajax 와 jQuery.getJSON 을 이용 하여 진도 정 보 를 비동기 적 으로 얻 으 려 고 시 도 했 습 니 다.실측 결과 진도 가 10 번 정도 업데이트 되 었 으 면 진도 가 더 이상 변 하지 않 고 이상 한 일이 발생 하지 않 았 습 니 다.많은 웹 페이지 를 찾 아 보 았 지만 결과 가 없 었 습 니 다.프로젝트 에 prototype.js 를 사 용 했 기 때문에 ajax 로 요청 을 했 는데 문제 가 없 었 습 니 다.공사 의 진도 때문에 이 문 제 는 깊이 연구 하지 않 았 습 니 다.다만 좀 이상 하 다 고 생각 했 습 니 다.여기 서 특별히 기록 하 겠 습 니 다.만약 에 동업자 가 비슷 한 문 제 를 겪 었 다 면 지 도 를 환영 합 니 다.