Javascript Axios Project to Make HTTP GET & POST Requests to JSONPlaceholder Fake REST API in HTML5 Form Full Project For Beginners

 

 

AXIOS GET HTTP GET REQUEST TO JSONPLACEHOLDER API

 

 

index.html

 

 

<!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">
    <title>Axios JSONPlaceholder API Example</title>
</head>
<body>
    <button onclick="loadData()">Get Data</button>
    <div id="result"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<script>
    let i=0;
    function loadData(){
    i = i+1
    axios.get("https://jsonplaceholder.typicode.com/todos/" + i)
    .then((response) => {
        console.log(response.data)
        let data = `<p>
        Id : ${response.data.id} title : ${response.data.title}</p>
        `
        document.getElementById('result').append(data)
        document.getElementById('result').append("\n")
    })
}
</script>
</html>

 

 

 

 

let object = {
        userId:4,
        title:"hello world"
    }
    axios.post("https://jsonplaceholder.typicode.com/posts",object)
    .then((response) => {
        console.log(response)
    })

Leave a Reply