2016-08-24 71 views
-5

我提琴上運行它的成功:http://jsfiddle.net/donhuvy/hfq4ycvs/爲什麼我的源代碼不起作用?

但是當我運行它在本地(文件progress_bar.html),沒有發生。

<!DOCTYPE html> 

<html> 
<head> 
    <title>progress bar...</title> 
    <style type="text/css"> 
     .progress { 
      display: block; 
      text-align: center; 
      width: 0; 
      height: 3px; 
      background: red; 
      transition: width .3s; 
     } 

     .progress.hide { 
      opacity: 0; 
      transition: opacity 1.3s; 
     } 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
      var data = []; 
      for (var i = 0; i < 100000; i++) { 
       var tmp = []; 
       for (var i = 0; i < 100000; i++) { 
        tmp[i] = 'hue'; 
       } 
       data[i] = tmp; 
      } 
      ; 

      $.ajax({ 
       xhr: function() { 
        var xhr = new window.XMLHttpRequest(); 
        xhr.upload.addEventListener("progress", function (evt) { 
         if (evt.lengthComputable) { 
          var percentComplete = evt.loaded/evt.total; 
          console.log(percentComplete); 
          $('.progress').css({ 
           width: percentComplete * 100 + '%' 
          }); 
          if (percentComplete === 1) { 
           $('.progress').addClass('hide'); 
          } 
         } 
        }, false); 
        xhr.addEventListener("progress", function (evt) { 
         if (evt.lengthComputable) { 
          var percentComplete = evt.loaded/evt.total; 
          console.log(percentComplete); 
          $('.progress').css({ 
           width: percentComplete * 100 + '%' 
          }); 
         } 
        }, false); 
        return xhr; 
       }, 
       type: 'POST', 
       url: "/echo/html", 
       data: data, 
       success: function (data) { 
       } 
      }); 
     }); 


    </script> 

</head> 
<body> 

<div class="progress"></div> 

</body> 
</html> 
+0

你把你的文件放在哪裏?在本地服務器上? –

+0

確保你已經安裝了像WAMP這樣的本地服務器。 – sabith

+0

在控制檯中檢查您的錯誤消息。像其他人一樣,您應該使用本地Web服務器進行測試和/或將您的ajax調用修改爲/ echo/html – Dylan

回答

0

因爲AJAX總是從服務器請求&等待響應,我們必須把HTML文件的Web服務器(的Apache HTTP服務器或NGINX),AJAX將運行。

相關問題