1. ホーム
2. パソコン
3. javascript

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

投稿日 : 2022年08月13日 更新日 :

やりたいこと

送信

準備

参考

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><!--ここに結果が表示される-->

参考

【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

展開

#!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)

応用

参考

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

まとめ