2016-11-04 11 views
1

私はjQueryとPythonでちょっと迷っています。読み込み中のimgを表示する非常に単純なページを表示しようとしていましたが、 。jQuery読み込みimg exec Pythonスクリプト中PHP

もちろん、Pythonスクリプトの準備ができたら、読み込み中の画像を隠し、Pythonスクリプトの結果をその場所に表示したいと考えていました。

これまでのところ、私は私のWebページのためのいくつかのGoogleの助けと一緒にこれをつなぎすることができました:

<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> 

任意の助けがgreatelyいただければ幸いです。ありがとう!

+0

idが "id"の要素がありません – simon

答えて

1

の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." 
2

この部分

$("#id").html(data); 

jQueryのあなたのPythonスクリプトからの応答にID「ID」を持つ要素を満たしていることを意味します。問題は、id="id"の要素がないことです。

また、$("#img").hide();を成功ハンドブック$.postに入れることもできます。 $.postが終了すると、この方法で画像が非表示になります。現在のコードでは、$.postが非同期リクエストであり、他のコードがそれを待たずにすぐに非表示になります。私が追加した<div>は(あなたが望む任意の他のHTML要素に置き換えることができます)

<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> 

注:

あなたのコードは次のようになります。

UPDATE

あなた$.post要求が異なる理由のために失敗した可能性があります。現在のところ、リクエストが成功したときにのみ呼び出される成功ハンドラしかありません。これは私のためによく働いている

$.post(url, function(data){ 
    $("#id").html(data); 
    $("#img").hide(); 
}) 
.fail(function(response) { 
    alert('Error: ' + response.responseText); 
    // .. do something else .. 
}); 
+0

ありがとうサイモン。しかし、ロードイメージを隠すようには見えず、pythonのテキストも出力しません。なぜなら、pythonのテキストには出力が得られないからです。なぜそれがimgを隠さないのでしょうか? – user5740843

関連する問題