▲TOPへ戻る

formDataをPOST送信し、pythonでの計算結果をjavascriptで受け取る方法【python,javascriptの連携】

formData python

やりたいこと

以下のようなフォームで値をPOST送信し、 pythonで計算した後、javascriptで結果を受け取りたいと思います。

結果 :

準備

HTMLファイルとpythonファイルを同じ階層(フォルダ)に入れ、 サーバー上でファイルを開いてください。 ローカルサーバーならXAMPPなどがあります。

参考

js
XAMPPのダウンロードと設定 PHPのローカル環境を整える

HTML

<form id="fp" action="./sumple.py"> <!--actionは同じ階層に入れたpythonファイル-->
  <input type="number" name="num1" id="num1" placeholder="0"/> <!--nameの指定を忘れずに‼-->
  <input type="number" name="num2" id="num2" placeholder="0"/> <!--nameの指定を忘れずに‼-->
</form>
<button id="submit">送信</button>
<div class="result">結果 : </div><!--ここに結果が表示される-->

参考

js
【javascript】formData フォームの内容をjavascriptで制御する

javascript

const fp = document.getElementById("fp");
const submit = document.getElementById("submit");
const result = document.querySelector(".result");
const url =
  "https://xxxxxxxxxxxx/sumple.py"; // pythonファイルのURL

submit.addEventListener("click", () => {
  let formData = new FormData(fp); // フォームの値をformDataにセット

  async function postData() {      // async await をお忘れなく
    const res = await fetch(url, { // urlへ
      method: "POST",              // POST送信
      body: formData,
    });
    const r = await res.json(); // レスポンスをjsonで受け取る
    result.textContent = "結果 : " + r;
  }
  postData();
});

python

15,16行目 : 型を数字にしないと、「1+1=11」になってしまいます。

19行目 : jsonに変換しないと、javascriptで受け取れません。

#!C:/Users/Python39/python.exe (パソコン上のpythonをインストールした場所) 
# -*- coding: utf-8 -*-

import cgi
import json

print('Content-type: text/html; charset=UTF-8')
print('')

formData = cgi.FieldStorage() # javascriptからのPOST送信を受け取る

num1 = formData.getvalue('num1')
num2 = formData.getvalue('num2')

num1 = int(num1) #型を数字に
num2 = int(num2) #型を数字に

obj = num1 + num2
jsonObj = json.dumps(obj) # jsonに変換

print(jsonObj)

応用

以上の方法を使って、 Yahoo API のルビ振り を実装することができます。

実装例 : ルビ振りジェネレーター

参考

js
【python】超基礎 四則計算の方法 javascriptと比較

まとめ

  1. jsとpythonをサーバー上で開く
  2. asyncとawaitでPOST送信する
  3. pythonで計算し、jsonに変換
  4. javascriptでレスポンスを受け取る

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<

パソコン

javascript

カメラ

ブログ

サイト内検索👇