jQuery在执行Python时加载img
jQuery在执行Python时加载img
提问于 2016-11-04 07:44:47
我在jQuery和Python中摸索了一下，我试图显示一个非常简单的页面，显示一个加载的img，而一个略长的python脚本获得了我需要显示的信息。
当然，当Python脚本准备就绪时，我希望隐藏加载映像，并在其中显示Python脚本的结果。
到目前为止，我能够把这些与谷歌的帮助结合起来为我的网页：
<html>
<head>
<img id="img" src="loader.gif">
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
url: "http://localhost/test.py";
$.post(url, function(data){
$("#id").html(data);
});
$("#img").hide();
});
</script>
</head>
</html>任何帮助都将不胜感激。谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-11-09 08:45:47
这对我来说效果很好：
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Python Loading IMG Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<script src="src/jquery-1.10.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="loading">
<img src="src/loading.gif" alt="loading_icon" />
</div>
<div id="results"></div>
</div>
<script language="javascript" type="text/javascript">
var URL = 'cgi-bin/test.py';
function read(){
$('#loading').show();
$.get(
URL,
{},
function(result){
$('#loading').hide();
$('#results').html(result);
},
'text'
).fail(function() {
alert('Wrong Python URL');
});
}
read();
</script>
</body>
</html>cgi-bin/test.py
#!/usr/bin/env python
print "Content-type: text/html\r\n"
print "\r\n"
print "This is where the text goes."
print "Make sure you use HTML tags."Stack Overflow用户
发布于 2016-11-04 08:22:45
本部分
$("#id").html(data);这意味着jQuery正在用id "id“填充元素，其中包含来自Python的响应。问题是，您没有一个具有id="id"的元素。
您还想要做的是将$("#img").hide();放入$.post的成功处理程序中。这样，当$.post完成时，图像就会被隐藏起来。对于当前的代码，它会立即隐藏，因为$.post是一个异步请求，因此任何其他代码都不会等待它。
您的代码应该如下所示：
<html>
<head>
<img id="img" src="loader.gif">
<div id="id"></div>
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
url: "http://localhost/test.py";
$.post(url, function(data){
$("#id").html(data);
$("#img").hide();
});
});
</script>
</head>
</html>注意我添加的<div> (您可以用您想要的任何其他HTML元素替换它)。
更新
由于不同的原因，您的$.post请求有可能失败。目前，只有在请求成功时才会调用成功处理程序。您可以添加这样的“不成功”处理程序：
$.post(url, function(data){
$("#id").html(data);
$("#img").hide();
})
.fail(function(response) {
alert('Error: ' + response.responseText);
// .. do something else ..
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40417587
复制相关文章
相似问题
腾讯云开发者
