1991/examples/public/crud.html

71 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET, PUT, POST, DELETE</title>
</head>
<body>
<input type="submit" value="GET" id="get">
<input type="submit" value="POST" id="post">
<input type="submit" value="PUT" id="put">
<input type="submit" value="DELETE" id="delete">
<script type="text/javascript">
// https://gist.github.com/EtienneR/2f3ab345df502bd3d13e
(function () {
function onload () {
var rt = xhr.responseText;
console.log(rt, xhr.readyState, xhr.status);
}
var url = "/api/v1/users";
var xhr = new XMLHttpRequest();
var get = document.querySelector("#get");
var post = document.querySelector("#post");
var put = document.querySelector("#put");
var del = document.querySelector("#delete");
// GET
get.onclick = function () {
xhr.open("GET", url + "/1", true);
xhr.onload = onload;
xhr.send(null);
};
// POST
// TODO: 201 status
post.onclick = function () {
var data = {};
data.firstname = "Aaaa";
data.lastname = "Bbbb";
var json = JSON.stringify(data);
xhr = new XMLHttpRequest();
xhr.open("POST", url + "/1", true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onload = onload;
xhr.send(json);
};
// PUT
put.onclick = function () {
var data = {};
data.firstname = "Aaaa2";
data.lastname = "Bbbb2";
var json = JSON.stringify(data);
xhr = new XMLHttpRequest();
xhr.open("PUT", url + "/2", true);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
xhr.onload = onload;
xhr.send(json);
};
// DELETE
del.onclick = function () {
xhr = new XMLHttpRequest();
xhr.open("DELETE", url + "/2", true);
xhr.onload = onload;
xhr.send(null);
};
}());
</script>
</body>
</html>