Demo of CRUD operations from Fetch
-
Run the backend
-
Open
index.html
and click on particular operations -
Refer
console
for details of both working and code
-
NOTE:
- Create
- Read
- Update
- Delete
function create_() {
fetch(URL, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(DATA1),
});
var msg = "create successful";
console.log(msg);
htmlOutput(msg);
}
function read_all() {
fetch(URL)
.then((response) => response.json())
.then((data) => {
console.log("success!");
console.log(data);
htmlOutput(data);
});
}
function read_one() {
fetch(URL)
.then((response) => response.json())
.then((data) => {
for (let i = 0; i < data.length; i++) {
console.log("success!");
htmlOutput(data[i].name);
}
});
}
function update_() {
fetch(URL + ID, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(DATA2),
});
var msg = "update successful";
console.log(msg);
htmlOutput(msg);
}
function delete_() {
fetch(URL + ID, {
method: "DELETE",
});
var msg = "delete successful";
console.log(msg);
htmlOutput(msg);
}
Also refer AJAX-CRUD