とりぷるぷぅ技術メモ: [Python][CGI]Ajax

id="sendButton"の送信ボタンを押した時に、test2.pyに対してname="a"のinput欄に入力したテキストをsendValueという変数に入れて渡す。 python2.pyから返ってきた文字列はid=resultのspan内に格納される。

test2.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=UTF-8">
    <title>Ajax Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#sendButton').click(function(event) {
          $.post(
            "/cgi-bin/python_test/test2.py",
            { sendValue: $('#a').val() },
            function(data, textStatus) {
              if (textStatus == 'success') {
                $('#textStatus').text('Success');
              }
              $("#result").html(data);
          }, 'html')
          .fail(function() {
              $("#result").html("Failed");
            }
          );
        });
      });
    </script>
  </head>
  <body>
    入力欄に文字列を入れると、POST されて応答が返ってきます<br/>
    <input type="text" name="a" value="" id="a"/><br/>
    <button type="button" id="sendButton">送信</button><br/><br/>
    textStatus: <span id="textStatus"></span><br/>
    Result: <span id="result"></span>
  </body>
</html>

test2.py

#!/usr/bin/python
#-*- coding:utf-8 -*-

import cgi

# エラー発生時にレポートを表示
import cgitb
cgitb.enable()

html0 = """
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=utf-8"/>
"""

#######################################################################
# Main function
#######################################################################
if __name__ == '__main__':
 print(html0)
 form = cgi.FieldStorage()
 #print(form)
 value = form['sendValue'].value
 print('Hello, ' + value)

実行結果（ブラウザに渡されるHTMLソース)

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; CHARSET=UTF-8">
    <title>Ajax Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $('#sendButton').click(function(event) {
          $.post(
            "/cgi-bin/python_test/test2.py",
            { sendValue: $('#a').val() },
            function(data, textStatus) {
              if (textStatus == 'success') {
                $('#textStatus').text('Success');
              }
              $("#result").html(data);
          }, 'html')
          .fail(function() {
              $("#result").html("Failed");
            }
          );
        });
      });
    </script>
  </head>
  <body>
    入力欄に文字列を入れると、POST されて応答が返ってきます<br>
    <input type="text" name="a" value="" id="a"><br>
    <button type="button" id="sendButton">送信</button><br><br>
    textStatus: <span id="textStatus">Success</span><br>
    Result: <span id="result">
      <meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8">
      Hello, abc
    </span>
  </body>
</html>

とりぷるぷぅ技術メモ

2017年5月31日水曜日

[Python][CGI]Ajax

0 件のコメント:

コメントを投稿