Code as seen in the video:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS Modules</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="module" src="./js/index.js"></script>
</head>
<body>
<div id="header-div"><h1 id="header-text"></h1></div>
<div id="main-div">
<input type="text" id="name">
<button id="btn-submit">Submit</button>
</div>
<div id="footer-div"></div>
</body>
</html>
index.js
const getGreetingsFromAPI = async() =>{
//GET
const baseApiUrl = "http://localhost/jslecture/api";
const ngalan = document.getElementById("name").value;
const response = await axios.get(`${baseApiUrl}/greetings.php`,{
params:{name:ngalan}
});
if(response.status == 200){
console.log(response.data);
}else{
alert("Error!");
}
}
const getGreetingsFromAPI2 = async() =>{
//POST
const baseApiUrl = "http://localhost/jslecture/api";
const ngalan = document.getElementById("name").value;
const skill = {language:"JavaScript", level:3};
const formData = new FormData();
formData.append("name", ngalan);
formData.append("skill", JSON.stringify(skill));
const response = await axios({
url: `${baseApiUrl}/greetings.php`,
method: "POST",
data:formData
});
if(response.status == 200){
const student = response.data;
console.log(student.name);
console.log(student.language);
console.log(student.level);
}else{
alert("Error!");
}
}
document.addEventListener("DOMContentLoaded", ()=>{
document.getElementById("btn-submit").addEventListener("click", ()=>{
getGreetingsFromAPI2();
});
})
greetings.php
<?php
$name = $_POST['name'];
$skillArray = json_decode($_POST['skill'], true);
$language = $skillArray['language'];
$level = $skillArray['level'];
//echo "Hello $name, your programming language is $language of level $level";
$returnValue = array("name" => $name, "language" => $language, "level" => $level);
echo json_encode($returnValue);
?>
No comments:
Post a Comment