Question

我正在运行一个webpy Web应用程序，其中包含一个包含Bootstrap进度条的模板HTML文件。我想使用jQuery AJAX使用服务器中的值更新进度条。

我使用setInterval（）每秒发出一次GET请求，并在服务器currentProgress上增加一个变量，每个GET都有一个随机值。我将currentProgress值传递给index.html模板变量$ percentLoaded。

问题：当我运行网页时，服务器上的值（currentProgress）会更新，当我将其打印到命令提示符时，我可以看到该值。但是，在刷新浏览器之前，$ percentLoaded的值不会更新，如console.log（$ percentLoaded）所示。

结果是网页在不重新加载的情况下不会更新。我怎样才能让AJAX更新$ percentLoaded以便更新进度条而不必刷新页面？

注意：最终目标是从服务器检索有意义的值，但我使用“虚拟”函数getProgressIncrement（）作为代理来使基础工作。

app.py

import web
import random

urls = (
    '/', 'index'
)

render = web.template.render('templates/')

app = web.application(urls, globals())

currentProgress = 0

def getProgressIncrement():
    global currentProgress
    currentVal = currentProgress
    remainingProgress = 100 - currentVal
    if currentVal == 100:
        return 0
    elif remainingProgress <= 5:
        return remainingProgress
    else:
        return random.randint(1, 6)

class index:
    def GET(self):
        global currentProgress
        # print currentProgress
        currentProgress += getProgressIncrement()
        return render.index(currentProgress)

if __name__ == "__main__":
    app.run()

模板/ index.html中

$def with (percentLoaded)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="progress" id="outerBar">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"
        id="myBar">
        0%
    </div>
</div>

<script>
    // much of this code is from http://elfga.com/articles/bootstrap-progress-bar-update-jqueryajax/
    jQuery(document).ready(function () {
        var progressPump = setInterval(function () {
            /* query the completion percentage from the server */
            jQuery.get("/", function () {
                // console.log($percentLoaded);
                /* update the progress bar width */
                jQuery("#myBar").css('width', $percentLoaded + '%');
                /* and display the numeric value */
                jQuery("#myBar").html($percentLoaded + '%');

                /* test to see if the job has completed */
                if ($percentLoaded > 99.999) {
                    clearInterval(progressPump);
                    jQuery("#outerBar").removeClass("active");
                    jQuery("#myBar").html("Done");
                }
            })
        }, 1000);
    });

</script>

</html>

Answer 1

我终于在阅读了香草AJAX教程（https://www.w3schools.com/xml/ajax_intro.asp），然后是jQuery AJAX教程（https://www.w3schools.com/jquery/jquery_ajax_intro.asp）并意识到我需要一个额外的Python类来返回更新的服务器值之后才想出来依赖WebPy的模板。这是更新后的代码：

<强> app.py

import web
import random

urls = (
    '/', 'index',
    '/updateProgress', 'updateProgress'
)

render = web.template.render('templates/')

app = web.application(urls, globals())

currentProgress = 0

def getProgressIncrement():
    global currentProgress
    currentVal = currentProgress
    remainingProgress = 100 - currentVal
    if currentVal == 100:
        return 0
    elif remainingProgress <= 5:
        return remainingProgress
    else:
        return random.randint(1, 6)

class index:
    def GET(self):
        return render.index()

class updateProgress:
    def GET(self):
        global currentProgress
        currentProgress += getProgressIncrement()
        return str(currentProgress)

if __name__ == "__main__":
    app.run()

<强>模板/ index.html中

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="progress" id="outerBar">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%"
        id="myBar">
        0%
    </div>
</div>

<script>
    jQuery(document).ready(function() {
        var progressPump = setInterval(function() {
            jQuery("#myBar").load("/updateProgress", function(responseTxt, statusTxt, xmlReqObj) {
                if (statusTxt == 'success') {
                    jQuery("#myBar").css('width', responseTxt + '%');
                    jQuery("#myBar").html(responseTxt + '%');
                }
                if (statusTxt == 'error') {
                    alert("Error: " + xmlReqObj.status + ": " + xmlReqObj.statusTxt);
                    clearInterval(progressPump);
                }
                if (responseTxt == '100') {
                    clearInterval(progressPump);
                    jQuery("#outerBar").removeClass("active");
                    jQuery("#myBar").html("Done");
                }
            });
        }, 500);
    });
    
</script>

</html>

＆＃13;

无法使用带有webpy的AJAX加载Bootstrap进度条

1 个答案: