2022-04-15 17:04:23 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>Bazzar</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div style="display: flex">
|
|
|
|
|
<div>
|
|
|
|
|
<form>
|
|
|
|
|
<select id="method">
|
|
|
|
|
<option value="GET">GET</option>
|
|
|
|
|
<option value="POST">POST</option>
|
|
|
|
|
<option value="PATCH">PATCH</option>
|
|
|
|
|
<option value="DELETE">DELETE</option>
|
|
|
|
|
</select>
|
|
|
|
|
<input id="path" type="text">
|
|
|
|
|
<textarea id="params"></textarea>
|
|
|
|
|
<input type="submit">
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<pre><code id="output"></code></pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
const out = document.querySelector('#output');
|
|
|
|
|
const form = document.querySelector("form");
|
|
|
|
|
const urlEl = form.querySelector('#path');
|
|
|
|
|
const paramsEl = form.querySelector('#params');
|
|
|
|
|
const mthEl = form.querySelector('#method');
|
|
|
|
|
|
|
|
|
|
form.addEventListener('submit', (ev) => {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
|
|
let path = urlEl.value;
|
|
|
|
|
let params = {};
|
|
|
|
|
const method = mthEl.value;
|
|
|
|
|
|
2022-04-16 20:20:59 +02:00
|
|
|
paramsEl.value.split("\n").forEach(s => {
|
2022-04-15 17:04:23 +02:00
|
|
|
if (!s.length) return;
|
|
|
|
|
let [k, v] = s.split("=");
|
|
|
|
|
params[k] = v;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const rest = method === 'GET'
|
|
|
|
|
? {}
|
|
|
|
|
: { body: JSON.stringify(params), headers: { 'Content-Type': 'application/json' } };
|
|
|
|
|
path = method === 'GET'
|
|
|
|
|
? `${ path }?${ JSON.stringify(params) }`
|
|
|
|
|
: path;
|
|
|
|
|
|
|
|
|
|
fetch(`/${ path }`, { ...rest, method })
|
|
|
|
|
.then(res => res.json())
|
|
|
|
|
.then(json => {
|
|
|
|
|
out.textContent = JSON.stringify(json, null, 4);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
