Ajaxサンプルプログラム

Python Ajax javascript

Ajaxを使った簡単なサンプルプログラムです。個人的なメモです。

動作概要

「Start」ボタンをクリックすると、ローディングイメージを表示した後、「Success!! 実行が成功しました。」と表示します。

プログラムの構成

  • top.html ... トップ表示画面
  • exe.py ... 実行処理（3秒スリープ後に、文字列を表示）
  • result.py ... 最終結果表示画面

プログラムコード

top.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ajaxサンプル</title>
<link rel="stylesheet" type="text/css" href="style.css">

<style type="text/css">
</style>

<script type="text/javascript">
</script>

</head>

<body>

<center>
Ajaxサンプルプログラム
<form action="[HOST_URL]/result.py" method="post">
<input type="submit" value="Start">
</form>
</center>

</body>
</html>
exe.py
#!/usr/local/bin/python
# -*- coding: utf-8 -*-

import time

HTML = '''Content-Type: text/html; charset=utf-8;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">

<style type="text/css">
</style>

</head>

<body>

<h1><font color="red">Success!!</font></h1>
実行が成功しました。

</body>
</html>
'''

if __name__ == "__main__":
    time.sleep(3)

    print HTML
result.py
#!/usr/local/bin/python
# -*- coding: utf-8 -*-

HTML = '''Content-Type: text/html; charset=utf-8;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Ajaxサンプル</title>
<link rel="stylesheet" type="text/css" href="./style.css">

<style type="text/css">
</style>

<script type="text/javascript" 
        src = "http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.1");</script>
<script type="text/javascript">
$(function(){
   $("#detail").load("./exe.py");
});
</script>

</head>

<body>

<center>
線から下の表示が変わります。
<hr width="100%">
<div id="detail"><img src="./loading.gif" alt="loading" /></div>
</center>

</body>
</html>
'''

if __name__ == "__main__":
    print HTML