Latihan AJAX
Latihan 1 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Library Data</title>
<style>
body {
background-image: linear-gradient(120deg, #ebaaff 0%, #c2e9fb 100%);
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
<h1>Coba Menampilkan Data</h1>
<div class="px-3 border-top py-4 text-center">
<button type="button" class="btn btn-dark" onclick="loadDoc()">Tampilkan Data</button>
<div class="my-3" id='targetData'></div>
</div>
</div>
</div>
<footer class="text-center">
<h5>© Riki Mi'roj Achmad 05111940000093
<a href="../index.html" style="color: inherit;">(Back)</a>
</h5>
</footer>
</body>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
document.getElementById("targetData").innerHTML = myObj.teks;
}
xhttp.open("GET", "https://mocki.io/v1/ae2768ef-7e81-47b8-998d-9ba065ad47ab", true);
xhttp.send();
}
</script>
</html>
Latihan 2 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Library Form</title>
<style>
body {
background-image: linear-gradient(120deg, #9affa8 0%, #ebeaca 100%);
}
</style>
</head>
<body onload="loadType()">
<div class="container min-vh-100 d-flex justify-content-center">
<div class="d-flex flex-column aligns-items-center justify-content-center">
<h1>Form Library</h1>
<div class="row">
<div class="px-3 border-top py-4 text-center">
<select id="type" class="form-select mb-3" onchange="loadGenre(document.getElementById('type').value)">
</select>
<select id="genre" class="form-select">
</select>
</div>
</div>
</div>
</div>
<footer class="text-center mt-4">
<h5>© Riki Mi'roj Achmad 05111940000093
<a href="../index.html" style="color: inherit;">(Back)</a>
</h5>
</footer>
</body>
<script>
function loadType() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Tipe...</option>";
let idx = 0 ;
for (let x of Object.keys(myObj)) {
html += "<option";
html += ` value='${idx}'>`;
html += x;
html += "</option>";
idx += 1;
}
document.getElementById("type").innerHTML = html;
}
xhttp.open("GET", "library.json", true);
xhttp.send();
}
function loadGenre(idx) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function () {
const myObj = JSON.parse(this.responseText);
let html = "<option>Pilih Genre..</option>";
for (let x of Object.values(myObj)[idx]) {
html += "<option>";
html += x;
html += "</option>";
}
document.getElementById("genre").innerHTML = html;
}
xhttp.open("GET", "library.json", true);
xhttp.send();
}
</script>
</html>
Home :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Login</title>
<style>
body {
background-image: linear-gradient(120deg, #e4aaff 0%, #c2e9fb 100%);
}
</style>
</head>
<body>
<div class="container d-flex justify-content-center">
<div class="d-flex min-vh-100 flex-column aligns-items-center justify-content-center">
<h1>Latihan Ajax Sederhana</h1>
<div class="px-3 border-top py-4 text-center">
<a href="./latihan1/index.html" class="btn btn-dark">Latihan 1</a>
<a href="./latihan2/index.html" class="btn btn-dark">Latihan 2</a>
</div>
</div>
</div>
<footer class="text-center">
<h5>© Riki Mi'roj Achmad 05111940000093</h5>
</footer>
</body>
<script>
</script>
</html>
Comments
Post a Comment