Ajax 处理时进度，前端代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Progressbar - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> .ui-progressbar { position: relative; } .progress-label { position: absolute; left: 50%; top: 4px; font-weight: bold; text-shadow: 1px 1px 0 #fff; </style> </head> <body> <button type="button" onclick="start();">开始</button> <div id="progressbar"> <div class="progress-label">Loading...</div> </div> <script> var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" ); $(function(){ if(typeof(inteval) != 'undefined') { doClearInterval; } else { inteval = null; } }) // 开始 function start(){ //使用JQuery从后台获取JSON格式的数据 $.ajax({ type:"post",//请求方式 url:"index.php",//发送请求地址 // timeout:30000,//超时时间：30秒 dataType:"json",//设置返回数据的格式 //请求成功后的回调函数 data为json格式 beforeSend: function() { // 开始进度条 begeinProgress(10); }, success:function(data){ console.log(data); if(data.code == 0){ doClearInterval(); setProgress(progressbar, 100); } }, //请求出错的处理 error:function(){ doClearInterval(); alert("请求出错"); } }); } // 进度条长度 var width = 0; function begeinProgress(t) { width = 1; interval = setInterval("doProgress()", t * 10); } // 设置进度 function setProgress(node, width) { if (node) { progressbar.progressbar({ value: width, }); progressLabel.text(width + '%'); } } // 循环进度 function doProgress() { if(width == 98) { doClearInterval(); } setProgress(progressbar, width); width++; } // 清除进度 function doClearInterval() { clearInterval(interval); } </script> </body> </html> |
后端代码：
|
1 2 3 4 5 6 7 |
<?php $back['code'] = 0; $back['data'] = []; $back['msg'] = 'ok'; sleep(10); echo json_encode($back); ?> |
测试运行结果如下：
