C# asp.net與jquery做ajax簡單進度條

一直以爲response.Flush() 可以實現。。。。發現不行的

最後還是採用了全局參數保存到 cahe 來做了


setCahe.ashx 模擬操作的事件進度

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            for (int i = 0; i < 101; i++)
            {
                context.Cache["KeyUI"] = i;
                System.Threading.Thread.Sleep(1000);
            }

            context.Cache.Remove("KeyUI");
        }


讀取cahe返回給jq

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            var cahe = context.Cache["KeyUI"];
            if (cahe != null)
            {
                context.Response.Write(cahe);
                context.Response.End();
            }            
        }


進度條顯示

<body>
    <div style="width:400px;height:20px; border:1px solid #808080">
        <div id="divgo" style="height:20px"></div>
    </div>
</body>
</html>
<script src="../../Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $(function () {       
        show();
    });


    function show()
    {
        $.get("testajax.ashx", function (data) {
            if (data == null || data == '')
            {
                $('#divgo').html("服務未啓動");
                return;
            }


            $('#divgo').css("width", data + "%");
            $('#divgo').css("background-color", "red");
            if (data != '100') {
                setTimeout(show, 1000);
            }
        });
    }
</script>

先運行 setCahe.ashx 模擬操作,然後刷新html即可

效果



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章