AjaxでPythonとのデータ送受信ができない

Question

#実現したいこと
当方プログラミングを初めて３ヶ月程度です。
自身の勉強をかねて、診断をするようなWebアプリを作っており、下記を実現したいと思っています。

① Webページ上でのイベント（ボタンのクリックなど）をトリガーとしてMySQLのテーブルにクエリを送信したい

② jsでトリガーとしたイベントごとにAjaxを利用して、クエリ送信用のpythonファイルへPOSTしたい

①を目的として、②で実現したいと考えているのですが、②の実装で詰まっている状態です。
お力添えいただけますと幸いです。

#現状
下記などを参考にAjaxの概要を把握した上で、サンプルを実装したいと思っています。

（参考ページ）
https://qiita.com/qiiChan/items/046a2f53cf4d93a6a398

ただお恥ずかしながら上記のページで書いているソースコード（下記に転記しています）をどのように実行していいのか、
他に何か必要なファイル（htmlなど）があるのか、がわかっていない状態です。
（Ajaxの利用方法というのとはまた違った問題かもしれませんが・・・）

#ソースコード

let samplePost = function(){

    //レスポンス
    var response = {};

    //リクエスト
    let request = {para_1 : 12,
                   para_2 : "aaaa",
                   para_3 : encodeURI("日本語送信")};

    //ajax
    $.ajax({
      type        : "POST",
      url         : url,
      data        : JSON.stringify(request),  //object -> json
      async       : false,                    //true:非同期(デフォルト), false:同期
      dataType    : "json",
      success     : function(data) {
        //data = JSON.parse(data);  //error
        response = data;
      },
      error       : function(XMLHttpRequest, textStatus, errorThrown) {
        console.log("リクエスト時になんらかのエラーが発生しました\n" + url + "\n" + textStatus +":\n" + errorThrown);
      }
    });

    //表示
    console.log(response);
}

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


#######################################################
#
#  import
#
#######################################################

import cgitb
import cgi
import os
import json
import sys
import io
import urllib.parse  #url encode/decode


#######################################################
#
#  main
#
#######################################################
def main():

    #文字化け対策
    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')

    #エラーの内容をブラウザに送信
    cgitb.enable()

    #値取得
    data   = sys.stdin.read()
    params = json.loads(data)

    #
    para_1 = params["para_1"]
    para_2 = params["para_2"]
    para_3 = params["para_3"]  #url encoded

    #url decode
    para_3 = urllib.parse.unquote(para_3)


    #######################################################
    #
    #  処理
    #
    #######################################################

    #処理

    #レスポンス
    response = {"res" : "aaaa"}


    #######################################################
    #
    #  response
    #
    #######################################################

    #print("Content-type: application/json")  #error
    print('Content-type: text/html\nAccess-Control-Allow-Origin: *\n')
    print("\n\n")
    print(json.JSONEncoder().encode(response))
    print('\n')


################################################
#
#  main実行
#
################################################
if __name__ == '__main__':
    main()

初学者故に抽象的な質問になってしまいすみません。
何卒よろしくお願いいたします。

Comments

[退会済みユーザー]

URL はリンクを挿入していただけると、読む人が便利です。
次回からは入力欄の上のクリップのマークをクリックしてくださいね。

[baboo]

m-oguraさん
こちらありがとうございます・・・！
読みやすい質問を心がけます、ご指摘ありがとうございます！

Answer 1

この例は CGI を使っているので別途 Apache や nginx といった Web サーバーというものが必要です。また、jQuery を使っているので手法が古いでしょう。両者を使わない形をおすすめします。Flask + fetch API を使った開発がシンプルかつ今どきでよいと思います。
FlaskにAjaxリクエストのFetch APIを組み込んだシンプルなアプリを作成してさくっと説明する - Qiita

JavaScript の記事で var を変数宣言に使ってあるものは MDN のもの以外はより注意して読まなければいけませんのでご注意を。

Comments

[baboo]

こちらご回答いただきありがとうございます！
フレームワークを使わずにどこまでやれるか、と少し意地になっていたのですが、A_kirisakiさんにご回答いただいたタイミングで再考し、Flaskを使ってみることとしました！
質問に対する回答はもちろんのこと、１つ考えるきっかけをありがとうございます！
またよろしくお願いいたします。