AJAX with Python Flask

child_template.html

{% extends 'base.html' %}

{% block title %}Setting{% endblock %}
{% block head %}
  {{ super() }}
  <!--<style type="text/css">
    .important { color: #336699; }
  </style>
  -->
{% endblock %}
{% block content %}
<h1>INDEX PAGE</h1>

<h3>Test</h3>

<div class="index_Test" style="display:flex">
  <!-- [Setting Part] -->
  <div class="index_Test__setting" style="width:50%" >
    <h3 class="setting_header">Test Setting</h3>
    <!--<form action="/tcp_test/" method="POST">-->

      <button class="index__tcp_btn" type="submit" name="TC1P_test" >TCP Test</button> 
    <!--</form>-->

    <form action="/sensor_test/" method="POST">
      <button class="index__sensor_btn" type="submit" name="Sensor_test" onclick="sensor_Btn_click()">Sensor Test</button> 
    </form>

    <form action="/motor_test/" method="POST">
      <button class="index__motor_btn" type="submit" name="Motor_test" onclick="motor_Btn_click()">Motor Test</button>   
    </form>

    <form action="/camera_test/" method="POST">
      <button class="index__camera_btn" type="submit" name="Camera_test" onclick="camera_Btn_click()">Camera Test</button>   
    </form>
  </div>

  <!-- [Display Part] -->
  <div class="index_Test__status" style="width:50%">
    <h3 class="status_header">Test Status</h3>
    
    <div class="test_type">
      <span>Test : </span>
      <span class="test_type__selection">No selected</span>
    </div>
    
  </div>
</div>

{% endblock %}



{% block footer %}
{{ super() }}
<script>
  console.log("hrll  !!o");
document.querySelector(".index__tcp_btn").addEventListener("click",tcp_Btn_click);

function tcp_Btn_click(){

console.log("click");
const URL = '/tcp_test/';
const xhr = new XMLHttpRequest();
let sender = "asd";
let postObj = { 
    id: 1, 
    title: "What is AJAX", 
    body: "AJAX stands for Asynchronous JavaScript..."
}
let post = JSON.stringify(postObj)

xhr.open('POST', URL,true);
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(post);
};

function sensor_Btn_click(){};
function motor_Btn_click(){};
function camera_Btn_click(){};


</script>
{% endblock %}

request_handle.py

from flask import (
    Blueprint, flash, g, redirect, render_template, request, url_for
)
from werkzeug.exceptions import abort

bp = Blueprint('index', __name__)

@bp.route('/')
def index_setting(): # index화면 구성 함수

    return render_template('index.html')

def tcp_test():
    print("tcp_test")
    # IP 주소 입력받고 연결 확인

def sensor_test():
    print("sensor_test")
    # IP 주소 입력받고 연결 확인


def motor_test():
    print("motor_test")
    # IP 주소 입력받고 연결 확인



@bp.route('/<index_button>/',methods=['POST'])
def index_btn_click(index_button): # index화면 구성 함수
    if index_button=="tcp_test":
        print("request test",request.get_data(),type(request))
        print("req debug1",request.form)
        print("req debug2",request.files)
        print("req debug3",request.data)
        print("mimeyrpe",request.accept_mimetypes)
        test_obj=request.get_json()
        print("req debug4",test_obj,type(test_obj))
        print("req debug4",type(request.json))
        #print("chck",request.is_json)
        
        #print("req debug3",request.form['button'])
       
        tcp_test()
    elif index_button=="sensor_test":
        sensor_test()
    elif index_button=="motor_test":
        motor_test()
    
    #return redirect("/")#(request.url)
    return render_template('index.html',index_button=index_button)