Javascript 基于脚本进度的动态进度条？

我有一个使用webapp2框架的googleappengine应用程序，它与MySQL数据库交互。应用程序的用户可以上传数据。在上传过程中，我想显示一个进度条，因为它可能需要几分钟的时间。
根据我在其他主题（主要是：和）中看到的内容，我正在开发一个JSON/Javascript解决方案，这对我来说都是新的

如果我传递一个随机数，进度条本身就起作用。但是，我不知道如何从Python脚本中“加载”不断变化的值

以下是HTML/CSS/Javascript：

HTML:
<div id="myProgress">
    <div id="myBar"</div>
</div>  

CSS:
#myProgress {width: 300px;
height: 30px;
background-color: #ddd;
}
#myBar {width: 1%;
height: 30px;
background-color: #4CAF50;
}   

Javascript:     
<script type="text/javascript">
function move() {
    var elem = document.getElementById("myBar");   
    var width = 1;
    var id = setInterval(frame, 1000);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } 
        else {
            //var randomnumber = Math.floor(Math.random() * 100); --> works
            var randomnumber = function update_values() {
                $SCRIPT_ROOT = {{ script_root }};
                $.getJSON($SCRIPT_ROOT+"/uploading",
                    function(data) {
                        $("#width").text(data.width+" %")
                    });
            } ; --> this is wrong I assume
            var width = randomnumber; 
            elem.style.width = width + '%'; 
        }
    }
}
window.onload=move();   
</script>

---

如何更改脚本以使其工作？或者有更好的方法来解决这个问题吗？

您需要将“活动”的进度存储在功能之外的某个地方

黑客的“解决方案”是使用某种时间戳/签名将其存储到某种缓存解决方案中，如memcached或redis，以便您可以检索它（并使用cron作业类型使旧条目无效）

---

或者你可以全力以赴，让你的任务与类似的东西完全异步，但我怀疑你能在Google App Engine上做到这一点。

一个简单的ajax上传和进度条。。。这个例子发布到PHP，但经过一些修改，我相信它对您也同样适用。谢谢您的回复。我仍然不知道如何修改提议的解决方案……您能给我更多的指导，让我了解要修改哪些部分才能在javascript中获得正确的变量吗？我也在寻找一种从Python脚本加载值的方法。如果你正在上传一些东西，你不需要让Python传递任何东西，只要让它处理上传，我已经添加了事件监听器来监听上传过程。因此

runprogress（event）

将计算0-100的进程，因此如果添加console.log（百分比），您将看到它的日志从0到100

uploadcomplete（事件）

将在上载完成后执行，以便您可以使用它设置状态消息并清除/重置进度条。至于对ajax post的更改，您应该能够将

upload.php

更改为您想要使用的服务器端文件。对于

post

和

GET

方法，这应该同样有效，这将计算ajax调用的进度。啊，我明白了。还有一个问题可以确保这将导致一个解决方案。用户单击“上载”后，会向另一个网站的API发出python请求。所以上传文件的不是用户本人，就像在示例中一样，而是一系列请求的进度，我想在进度栏中显示。那它还能用吗？谢谢！我想我以前吃过芹菜。如果我没记错的话，它对GAE不起作用。GAE确实有自己的任务队列（）。这也一样吗？如果不是的话，我也会研究memcached和redis……GAE任务队列似乎正是您所需要的。因为这是一系列的请求，所以我认为最好的解决方案实际上是任务队列，但开发这是一个漫长的过程。我会权衡开发进度条的成本和实际需求。这是你网站的主要组成部分吗？如果是这样，处理这些任务（包括重试等）是关键。如果没有，那么也许可以从一个新的方法中重新考虑你正在尝试做什么，或者完全放弃进度条。一种新的方法是将10个任务（或你称之为活动）在API中分成10个单独的入口点，然后处理“调度”在客户端执行这些任务，而不是像现在这样，这是Python函数中的一个循环。基本上，一旦任务1完成（您可以通过对ajax请求的回调触发该事件），就开始任务2。通过这种方式，您可以用开发Python任务队列系统的成本换取JS代码的复杂性（您可能会失去一些功能，例如重试任务），谢谢！重新思考它是否真的有必要是这里的关键，提出这个问题很好：）我认为解决方案将是估计它将花费的时间，将该数字作为静态数字发送到模板，并让javascript以设定的间隔增加条数。但在我尝试获得@NewToJS首先提到的Ajax解决方案之后就没有了

class UploadingpageHandler(webapp2.RequestHandler):
def get(self):
    activities_list = [1,2,3,4,5,6,7,8,9,10]
    counter = 0
    script_root = 'localhost:10080'

    for activity in activities_list:
        counter = counter + 10
        upload.do_stuff_in_some_function_with_MySQL()   
        obj = {
        'width': counter
        }
        self.response.headers['Content-Type'] = 'application/json' --> this
        self.response.out.write(json.dumps(obj)) --> and this is wrong I assume

    template_vars = {
    'script_root': script_root
    }
    template = jinja_environment.get_template('uploading.html')
    self.response.out.write(template.render(template_vars))