Re: [問題] 請問如何實現ajax的載入時進度百分比?

看板Ajax作者banana2014 (香蕉共和國)時間10年前 (2015/05/01 04:40)推噓0(0推 0噓 4→)

留言4則, 2人參與討論串2/4 (看更多)

※ 引述《banana2014 (香蕉共和國)》之銘言： : 當用ajax傳輸資料時，在還沒有得到伺服器端運算的結果時，如何得到目前的進度百分比? 源自http://blog.toright.com/posts/3585/ajax-利用-xhr2-實作下載進度列-progress-event.html javascript: <!DOCTYPE html> <html> <head> <title>XMLHttpRequest Download Progress</title> </head> <body> <progress id="p"></progress> <script> var progressBar = document.getElementById('p'), client = new XMLHttpRequest(); client.open('GET', 'your-download-file.dat'); client.onprogress = function(event) { if(event.lengthComputable) { progressBar.max = event.total; progressBar.value = event.loaded; } }; client.onloadend = function(event) { progressBar.value = event.loaded; }; client.send(); </script> </body> <html> jquery: <!DOCTYPE html> <html> <head> <title>XMLHttpRequest Download Progress (jQuery)</title> <script src="jquery-1.11.0.min.js"></script> </head> <body> <progress id="p"></progress> <script> $(document).ready(function () { $.ajax({ type: 'GET', url: 'your-download-file.dat', xhrFields: { onprogress: function (event) { //Download progress if (event.lengthComputable) { $('#p').attr('max', event.total); $('#p').attr('value', event.loaded); } } } }); }); </script> </body> <html> 我用這兩種方式來讀取下載進度，但是好像都行不通，請問哪裡出了問題? -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.80.130.230 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1430426402.A.532.html <script src="jquery.js" type="text/javascript"></script> <script> var percentComplete=document.getElementById('a'); $.ajax({ type: 'POST', url: "ajax2.php", data: {}, beforeSend: function(evt) { if (evt.lengthComputable) { percentComplete.innerHTML = evt.loaded / evt.total; //Do something with download progress } }, success: function(data){ alert(data); } }); </script> <div id="a"></div> 以上程式碼一樣行不通，請問哪裡有錯了? ※ 編輯: banana2014 (219.80.130.230), 05/01/2015 05:21:44