刷新一个具有进度条的html表格

我有一个需求，这是一个表格列中应该是活动的进度条。我将有大量的bootstrap进度条（说10），我在服务器端使用spring mvc。现在的问题是我不知道如何不断刷新整个页面，不断刷新进度条（说一些每10secs），更准确地说，我希望每10秒刷新一次html表，它应该击中服务器，进度条的值应该是应用于html表格内的进度条。刷新一个具有进度条的html表格

有人可以建议如何做到这一点，我真的需要帮助和任何示例链接，这将实际上帮助我实现这一目标。我是不是javascript/ajax中的专家（我猜它可能使用ajax来实现这一点，我在google中也找不到任何示例）。如果这可以通过使用 javascript（也不是ajax）来实现，那么任何示例链接都会帮助我很多。感谢提前:)

来源

2014-10-04 user2159399

在JavaScript端你将有一个js函数在弹簧侧作出$就调用

function getProgress(){ 
    $.ajax({ 
    url: "/myurl", 
    success : function(data){ 
     //TODO here update your progressbar data=XX returned by spring 
     if(data!=100){ 
     setTimeout(getProgress,10000);//reschedule again until job finished 
     } 
    } 
    }) 
} 
setTimeout(getProgress,10000);

：

在控制器将返回的进展：

@RequestMapping("/myurl") 
public @ResponseBody String getProgrees(){ 
    //TODO business logic 
    return "XX";//0-100 
}

来源

2014-10-04 17:08:08 jpprade

Jpprade谢谢:)我会试试这个，让你知道，顺便说一句，我有疑问？如果我在单个html页面中有10个进度条，如何返回10个值（从spring开始）并将其分配给进度条？ – user2159399 2014-10-05 09:14:57

在这个CAS中，你可以返回一个HashMap 而不是字符串。您必须在classpath中拥有jackson（1.9 for spring <3.2）以将地图序列化为json。然后，如果在您的地图中添加了这样的值：map.put（“progress1”，“12”）;你可以在JS中检索它：data.progress1 – jpprade 2014-10-05 14:55:16

非常感谢:)你的代码工作得很好:)你保存了我的时间:)顺便说一句，多个进度条我已经从我的弹簧控制器返回“10 * 10 * 10”并使用javascript的split（）方法将其转换为字符串数组并将其分配给每个进度条！我只是想简化它，所以选择了我的这个解决方案！ :)不管怎样，非常感谢，我已将您的答案评为解决方案，祝您有美好的一天:) – user2159399 2014-10-07 04:37:02

刷新一个具有进度条的html表格

回答

相关问题