<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="out">Push the button</p>
<input id="name"/>
<br/>
<button onclick="get()">Get</button>
<br/>
<button onclick="getTest()">Get Test</button>
<br/>
<button onclick="post()">Post</button>
<br/>
<button onclick="put()">Put</button>
</body>
<script>
const url = "http://localhost:8080/api";
const out = document.getElementById("out");
const name = document.getElementById("name");
const get = async () => {
const res = await fetch(`${url}?name=${name.value}`);
const text = await res.text();
out.innerText = text;
}
const getTest = async () => {
const res = await fetch(`${url}/test`);
const text = await res.text();
out.innerText = text;
}
const post = async () => {
if (!name.value) {
alert("Name is required");
return;
}
const res = await fetch(url, {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: name.value
});
const text = await res.text();
out.innerText = text;
}
const put = async () => {
if (!name.value) {
alert("Name is required");
return;
}
const res = await fetch(`${url}/${name.value}`, {
method: 'put',
headers: {'Content-Type': 'application/json'},
body: name.value
});
const text = await res.text();
out.innerText = text;
}
</script>
</html>