SpringBoot ：JavaScriptでPostリクエスト(thymeleaf)
Q&A
Closed
解決したいこと
SpringBootプロジェクトをTomcat単体でサーバー構築し起動しています。
PostリクエストやGetリクエストはthymeleafを使わないとControllerで受け取れないのですが、javascriptでthymeleafを使用してpostリクエストを送る方法がわからず、行き詰っています、、、
該当するソースコード
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QRコード読み取り</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
text-align: center;
}
h1 {
background-color: #007bff;
color: #fff;
padding: 20px;
}
video {
display: block;
margin: 20px auto;
}
canvas {
display: none;
}
p {
font-size: 18px;
}
#loading {
display: none;
}
a {
display: block;
text-align: center;
margin-top: 20px;
color: #007bff;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<h1>QRコード読み取り</h1>
<video id="video" autoplay></video>
<canvas id="canvas"></canvas>
<p id="qrResult"></p>
<p id="loading">ロード中...</p>
<script th:inline="javascript" src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<script th:inline="javascript">
const video = document.getElementById('video');
const canvasElement = document.getElementById('canvas');
const canvas = canvasElement.getContext('2d');
const loading = document.getElementById('loading');
const output = document.getElementById('output');
let isReadQR = false;
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then((stream) => {
video.srcObject = stream;
video.setAttribute('playsinline', true);
video.play();
requestAnimationFrame(tick);
});
function tick() {
loading.innerText = 'ロード中...';
if (video.readyState === video.HAVE_ENOUGH_DATA) {
loading.hidden = true;
canvasElement.hidden = false;
canvasElement.height = video.videoHeight;
canvasElement.width = video.videoWidth;
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
var code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert',
});
if (code && !isReadQR) {
sendQRTextToServer(code.data);
isReadQR = true;
}
}
requestAnimationFrame(tick);
}
// QRコードから読み取ったテキストをサーバーに送信する関数
function sendQRTextToServer(qrText) {
const requestData = {
decodedText: qrText
};
fetch('/update-stamps', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
})
.then(response => response.text())
.then(responseText => {
console.log(responseText);
alert(responseText);
})
.catch(error => {
console.error('エラーが発生しました:', error);
});
}
</script>
<a th:href="@{/devmainmenu}">メインメニュー</a>
</body>
</html>
自分で試したこと
HTMLに変数を渡してformを送る等も試してみたのですが、うまくできず、、、
0
