Ajax 處理時進度條使用

charliecen發表於2018-10-18

流程： 前臺發起ajax請求，並顯示進度條。完成後顯示100%，並且clearInterval()

前端程式碼

<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>

後臺程式碼

<?php
$back['code'] = 0;
$back['data'] = [];
$back['msg'] = 'ok';
sleep(10);
echo json_encode($back);
?>

測試下

file

file

相關文章