AXY　備忘録的　技術と雑記: HTMLを動的に書き換えよう４

いろいろ調べて
HTMLの動的書き換えもあらかた判った。
AJAXもだいぶわかってきた。

多分最終段階だと思うんだけど、
Ajaxで相互データやり取りをやってみます。

今回作るもの

テクストボックス二つに入力された内容をAjaxでサーバに引数として渡して四則演算。

それではコードです。

まず、クライアント側です。

../html/Ajaxrq-culc.html

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

var xmlHttp;

function execulc(){
  xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = collculc;
  xmlHttp.open("POST", "http://[サーバーのIPアドレス]/cgi-bin/Ajaxrq-py-culc.cgi", true);

  let form = new FormData()

  if( document.getElementById("culcrule").value == ""){
    alert("入力が不足しています");
    exit();
  }
  let name0 = "culcrule";
  let value0 = document.getElementById("culcrule").value;

  if( document.getElementById("num1").value == ""){
    alert("入力が不足しています");
    exit();
  }
  let name1 = "num1";
  let value1 = document.getElementById("num1").value;

  if( document.getElementById("num2").value == ""){
    alert("入力が不足しています");
    exit();
  }
  let name2 = "num2";
  let value2 = document.getElementById("num2").value;

  form.append(name0,value0);
  form.append(name1,value1);
  form.append(name2,value2);

  xmlHttp.send(form );
}

function collculc(){
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var obj = JSON.parse(xmlHttp.responseText);
        alert(obj.state)
        document.getElementById("result").value= obj.result;
    }
}

  </script>
</HEAD>
<BODY>
<input type="number" id="num1">
<select id="culcrule">
  <option>＋</option>
  <option>－</option>
  <option>×</option>
　<option>÷</option>
</select>
<input type="number" id="num2">
<button type="button" onClick="execulc();">＝</button>
<input type="text" id="result">
<BODY>
</HTML>

続けて、サーバー側です。

Ajaxrq-py-culc.cgi

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

from os import environ
from datetime import datetime
import cgi

Forms = cgi.FieldStorage()
Keys = Forms.keys()
#Keys=["num1","num2","culcrule"]

mustkeys=["num1","num2","culcrule"]

if ( len(set(mustkeys) - set(Keys)) == 0):
  if( (not( Forms["num1"].value == "")) and \
      (not( Forms["num2"].value == ""))):

    num1 = int(Forms["num1"].value)
    num2 = int(Forms["num2"].value)
    result = 0

    if Forms["culcrule"].value == "＋":
      result = num1 + num2
    if Forms["culcrule"].value == "－":
      result = num1 - num2
    if Forms["culcrule"].value == "×":
      result = num1 * num2
    if Forms["culcrule"].value == "÷":
      if(not( num2 == 0)):
        result = float(num1) / num2
      else:
        result = "\"ERR\""

    print '''Content-Type: application/json; charset=utf-8

    {
        "state":"OK",
        "result":'''

    print result

    print '''}
    '''

  else:
    print '''Content-Type: application/json; charset=utf-8

    {
      "state":"NG",
      "result":"ERR"
    }'''

else:
  print '''Content-Type: application/json; charset=utf-8

  {
    "state":"NG",
    "result":"ERR"
  }'''

それではアクセスしてみます。計算の入力画面が表示されます。