Ajax এবং RESTful API একসঙ্গে ব্যবহার করে আপনি ওয়েব অ্যাপ্লিকেশনে ডাইনামিক ডেটা লোড, আপডেট, এবং ডেটা ফেচ করার কার্যক্রম খুব সহজে সম্পন্ন করতে পারেন। RESTful API একটি স্ট্যান্ডার্ড আর্কিটেকচার যা HTTP প্রোটোকল ব্যবহার করে ডেটার আদান-প্রদান করে। Ajax এর মাধ্যমে RESTful API এর সাথে যোগাযোগ করলে ওয়েব পেজের রিফ্রেশ ছাড়াই ডেটা লোড এবং ইন্টারঅ্যাকশন করা সম্ভব হয়।
RESTful API (Representational State Transfer) হলো একটি আর্কিটেকচারাল স্টাইল যা HTTP প্রোটোকল ব্যবহার করে ডেটা লেনদেনের জন্য নির্দিষ্ট রুলস অনুসরণ করে। এর মধ্যে প্রতিটি রিকোয়েস্ট একটি নির্দিষ্ট রিসোর্সকে নির্দেশ করে এবং রেসপন্স JSON বা XML ফরম্যাটে হয়।
RESTful API সাধারণত নিম্নলিখিত HTTP মেথড ব্যবহার করে:
এখানে একটি সাধারণ ফর্ম তৈরি করা হবে যা ব্যবহারকারী থেকে ডেটা নিবে এবং RESTful API এর মাধ্যমে ডেটা সাবমিট করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax and RESTful API Integration</title>
</head>
<body>
<h1>Submit Data to RESTful API</h1>
<form id="dataForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<button type="button" onclick="submitData()">Submit</button>
</form>
<div id="response"></div>
<script src="script.js"></script>
</body>
</html>
এখন, script.js ফাইল তৈরি করুন যা RESTful API এর সাথে যোগাযোগ করবে এবং ডেটা পাঠাবে বা গ্রহণ করবে।
script.js:
function submitData() {
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const data = {
name: name,
email: email
};
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://jsonplaceholder.typicode.com/users", true); // RESTful API Endpoint
xhr.setRequestHeader("Content-Type", "application/json");
// রিকোয়েস্ট রেসপন্স হ্যান্ডলিং
xhr.onload = function () {
if (xhr.status === 201) {
document.getElementById("response").innerHTML = "Data submitted successfully!";
} else {
document.getElementById("response").innerHTML = "Error: Unable to submit data.";
}
};
xhr.onerror = function () {
document.getElementById("response").innerHTML = "Error: Network issue.";
};
// JSON ফরম্যাটে ডেটা পাঠানো
xhr.send(JSON.stringify(data));
}
এখানে আমরা একটি জনপ্রিয় ফ্রি API JSONPlaceholder ব্যবহার করছি। এটি একটি মক API, যা ডেভেলপারদের প্র্যাকটিস করার জন্য তৈরি করা হয়েছে। আপনি এর মাধ্যমে POST, GET, PUT, DELETE মেথড ব্যবহার করতে পারেন।
এটি একটি POST রিকোয়েস্টের উদাহরণ যেখানে ব্যবহারকারীর নাম এবং ইমেইল ডেটা সাবমিট করা হচ্ছে।
API Endpoint:
https://jsonplaceholder.typicode.com/usersPOSTRequest body:
{
"name": "John Doe",
"email": "johndoe@example.com"
}
Response:
{
"id": 11,
"name": "John Doe",
"email": "johndoe@example.com"
}
এখন একটি GET রিকোয়েস্ট ব্যবহার করে ডেটা রিট্রাইভ করার উদাহরণ দেওয়া হবে।
JavaScript (GET Request):
function fetchData() {
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
// রিকোয়েস্ট রেসপন্স হ্যান্ডলিং
xhr.onload = function () {
if (xhr.status === 200) {
const users = JSON.parse(xhr.responseText);
displayUsers(users);
} else {
document.getElementById("response").innerHTML = "Error: Unable to fetch data.";
}
};
xhr.send();
}
function displayUsers(users) {
const userContainer = document.getElementById("response");
userContainer.innerHTML = "";
users.forEach(user => {
userContainer.innerHTML += `<p>${user.name} - ${user.email}</p>`;
});
}
HTML Button (GET Request):
<button onclick="fetchData()">Get Users</button>
<div id="response"></div>
PUT Request (ডেটা আপডেট করা):
function updateData() {
const xhr = new XMLHttpRequest();
xhr.open("PUT", "https://jsonplaceholder.typicode.com/users/1", true); // Update user ID 1
xhr.setRequestHeader("Content-Type", "application/json");
const data = {
name: "Updated Name",
email: "updated.email@example.com"
};
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = "Data updated successfully!";
} else {
document.getElementById("response").innerHTML = "Error: Unable to update data.";
}
};
xhr.send(JSON.stringify(data));
}
DELETE Request (ডেটা মুছে ফেলা):
function deleteData() {
const xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://jsonplaceholder.typicode.com/users/1", true); // Delete user ID 1
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = "Data deleted successfully!";
} else {
document.getElementById("response").innerHTML = "Error: Unable to delete data.";
}
};
xhr.send();
}
Ajax এবং RESTful API ইন্টিগ্রেশন একটি অত্যন্ত কার্যকরী পদ্ধতি যা ওয়েব অ্যাপ্লিকেশনের ডেটা লোডিং, আপডেটিং, এবং ডেটা ম্যানিপুলেশনকে আরও দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে। Ajax ব্যবহার করে আপনি RESTful API এর মাধ্যমে ক্লায়েন্ট-সাইড থেকে সার্ভার সাইডে ডেটা পাঠাতে এবং গ্রহণ করতে পারেন, যা একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে সহায়ক।
RESTful API (Representational State Transfer API) একটি স্থাপত্য শৈলী যা ওয়েব সার্ভিসের জন্য একটি স্ট্যান্ডার্ড বা কনভেনশন। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান করতে একটি সাধারণ, স্কেলেবল এবং কার্যকরী পদ্ধতি। RESTful API HTTP প্রোটোকল ব্যবহার করে কাজ করে এবং ডেটা রিকোয়েস্ট ও রেসপন্স এক্সচেঞ্জ করতে HTTP মেথডগুলির (GET, POST, PUT, DELETE ইত্যাদি) উপর ভিত্তি করে তৈরি করা হয়।
RESTful API এর কিছু মূল বৈশিষ্ট্য:
RESTful API কেন প্রয়োজন, তা বোঝার জন্য এর কিছু সুবিধা এবং ব্যবহারিক কারণ আলোচনা করা হলো:
উদাহরণ হিসেবে আমরা একটি Employee Management API এর জন্য RESTful পদ্ধতি কিভাবে ব্যবহার করা যায় তা দেখি:
১. GET /employees:
GET http://example.com/api/employees২. GET /employees/{id}:
GET http://example.com/api/employees/123৩. POST /employees:
POST http://example.com/api/employees
{
"name": "John Doe",
"email": "john@example.com",
"department": "Engineering"
}
৪. PUT /employees/{id}:
PUT http://example.com/api/employees/123
{
"name": "John Doe",
"email": "john.doe@example.com",
"department": "Marketing"
}
DELETE /employees/{id}:
DELETE http://example.com/api/employees/123
Ajax ব্যবহার করে RESTful API কল করা একটি সাধারণ এবং কার্যকর পদ্ধতি, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা রিকোয়েস্ট এবং রেসপন্স পরিচালনা করতে সাহায্য করে। Ajax এর মাধ্যমে আপনি RESTful API এর বিভিন্ন মেথড (GET, POST, PUT, DELETE) ব্যবহার করে ডেটা ফেচ, অ্যাড, আপডেট, এবং ডিলিট করতে পারেন।
এই উদাহরণে, আমরা একটি Employee Management API ব্যবহার করবো, যেখানে RESTful API এর মাধ্যমে বিভিন্ন অপারেশন করা হবে (GET, POST, PUT, DELETE)।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax RESTful API Example</title>
</head>
<body>
<h1>Employee Management</h1>
<button onclick="getEmployees()">Get All Employees</button>
<button onclick="addEmployee()">Add New Employee</button>
<button onclick="updateEmployee()">Update Employee</button>
<button onclick="deleteEmployee()">Delete Employee</button>
<div id="response-container" style="margin-top: 20px;">
<!-- API রেসপন্স এখানে দেখানো হবে -->
</div>
<script>
// সমস্ত এমপ্লয়ির তালিকা ফেচ করা (GET)
function getEmployees() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/employees", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
xhr.send();
}
// নতুন এমপ্লয়ি অ্যাড করা (POST)
function addEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/employees", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 201) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
var newEmployee = {
name: "Jane Doe",
email: "jane@example.com",
department: "Sales"
};
xhr.send(JSON.stringify(newEmployee));
}
// এমপ্লয়ি আপডেট করা (PUT)
function updateEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("PUT", "https://example.com/api/employees/123", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayResponse(response);
}
};
var updatedEmployee = {
name: "Jane Smith",
email: "jane.smith@example.com",
department: "Marketing"
};
xhr.send(JSON.stringify(updatedEmployee));
}
// এমপ্লয়ি ডিলিট করা (DELETE)
function deleteEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://example.com/api/employees/123", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
displayResponse({ message: "Employee deleted successfully" });
}
};
xhr.send();
}
// API রেসপন্স দেখানোর জন্য ফাংশন
function displayResponse(response) {
var container = document.getElementById("response-container");
container.innerHTML = JSON.stringify(response, null, 2);
}
</script>
</body>
</html>
১. GET রিকোয়েস্ট (getEmployees):
GET মেথড ব্যবহার করে সমস্ত এমপ্লয়ির ডেটা ফেচ করে।xhr.onreadystatechange ব্যবহার করে রিকোয়েস্টের রেসপন্স চেক করা হয়। যদি রিকোয়েস্ট সফল হয় (HTTP স্ট্যাটাস 200), তাহলে JSON ডেটা প্রসেস করা হয় এবং displayResponse ফাংশনকে কল করে তা HTML এ দেখানো হয়।২. POST রিকোয়েস্ট (addEmployee):
POST মেথড ব্যবহার করে সার্ভারে পাঠানো হয়।xhr.send() এর মাধ্যমে পাঠানো হয় এবং রেসপন্স 201 (Created) হলে তা UI তে দেখানো হয়।৩. PUT রিকোয়েস্ট (updateEmployee):
PUT মেথড ব্যবহার করে একটি নির্দিষ্ট এমপ্লয়ির তথ্য আপডেট করা হয়। এখানে এমপ্লয়ির ID 123 ধরা হয়েছে।200), তাহলে রেসপন্সটি UI তে দেখানো হয়।৪. DELETE রিকোয়েস্ট (deleteEmployee):
DELETE মেথড ব্যবহার করে নির্দিষ্ট ID এর এমপ্লয়ি ডিলিট করা হয়।200), তাহলে একটি মেসেজ UI তে দেখানো হয় যে এমপ্লয়িটি সফলভাবে ডিলিট হয়েছে।৫. displayResponse ফাংশন:
response-container এ দেখানো হয়, যা ব্যবহারকারীর জন্য ডাইনামিক ফিডব্যাক দেয়।১. Asynchronous Operation:
২. HTTP Methods:
৩. JSON Integration:
৪. Scalability and Flexibility:
RESTful API এর রেসপন্স হ্যান্ডলিং এবং ডেটা ডিসপ্লে করা একটি গুরুত্বপূর্ণ দিক, যা একটি ওয়েব অ্যাপ্লিকেশনকে ব্যবহারকারীর জন্য ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে। যখন আপনি Ajax ব্যবহার করে RESTful API কল করেন, তখন আপনি API রেসপন্সকে প্রসেস করে তা ইউজার ইন্টারফেসে (UI) দেখান। এই প্রক্রিয়াটি সাধারণত JSON ডেটা প্রসেসিং এবং ডাইনামিক HTML এ রেন্ডার করার মাধ্যমে করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RESTful API Response Handling Example</title>
<style>
/* টেবিল স্টাইল */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Employee List</h1>
<button onclick="fetchEmployees()">Fetch Employees</button>
<table id="employee-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div id="message-container" style="margin-top: 20px; color: red;">
<!-- Error বা অন্যান্য মেসেজ এখানে দেখানো হবে -->
</div>
<script>
// এমপ্লয়ির তালিকা ফেচ করার ফাংশন
function fetchEmployees() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/employees", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayEmployees(response);
} else {
displayError("Error fetching employee data. Status: " + xhr.status);
}
}
};
xhr.onerror = function() {
displayError("Network error occurred while fetching data.");
};
xhr.send();
}
// এমপ্লয়ির ডেটা টেবিলে রেন্ডার করার ফাংশন
function displayEmployees(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.id}</td>
<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// Error মেসেজ ডিসপ্লে করার ফাংশন
function displayError(message) {
var messageContainer = document.getElementById("message-container");
messageContainer.innerHTML = message;
}
</script>
</body>
</html>
১. fetchEmployees() ফাংশন:
GET মেথড ব্যবহার করে সমস্ত এমপ্লয়ির ডেটা ফেচ করে।xhr.onreadystatechange ব্যবহার করে রেসপন্স চেক করা হয়। যদি রিকোয়েস্ট সফল হয় (HTTP স্ট্যাটাস 200), তাহলে JSON ডেটা প্রসেস করা হয় এবং displayEmployees() ফাংশনকে কল করা হয়।displayError() ফাংশন কল হয়, যা মেসেজ কন্টেইনারে ত্রুটি মেসেজ প্রদর্শন করে।২. displayEmployees() ফাংশন:
<tbody>) এমপ্লয়ির তথ্য যোগ করে।tr (টেবিল রো) তৈরি করা হয় এবং td (টেবিল ডাটা) এর মাধ্যমে তথ্য যোগ করা হয়।data.forEach লুপ ব্যবহার করে ডাইনামিক্যালি প্রতিটি এমপ্লয়ির তথ্য টেবিলে রেন্ডার করা হয়।৩. displayError() ফাংশন:
১. Dynamic UI Update:
২. Error Handling:
৩. JSON Data Parsing:
৪. Asynchronous Operation:
200 (OK) হলে JSON ডেটা প্রসেস করা হয় এবং টেবিলে রেন্ডার করা হয়।404 (Not Found) বা অন্য কোনো ক্লায়েন্ট ত্রুটি থাকে, তাহলে displayError() ফাংশন কল হয় এবং একটি ত্রুটি মেসেজ দেখায়।500 (Internal Server Error) বা অন্য কোনো সার্ভার ত্রুটি থাকে, তখনও একইভাবে displayError() ফাংশন ব্যবহার করে ত্রুটি মেসেজ প্রদর্শিত হয়।xhr.onerror ইভেন্ট ব্যবহার করে নেটওয়ার্ক ত্রুটিগুলো হ্যান্ডল করা হয় এবং ব্যবহারকারীকে নেটওয়ার্ক সমস্যার বিষয়ে জানানো হয়।Ajax এবং API ইন্টিগ্রেশন ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ পদ্ধতি, যা ডেটা রিকোয়েস্ট এবং রেসপন্সের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে ইন্টারঅ্যাকশন সহজ করে। এই পদ্ধতিতে Ajax ব্যবহার করে RESTful API কল করা হয় এবং API থেকে প্রাপ্ত ডেটা UI তে ডাইনামিক্যালি রেন্ডার করা হয়।
এই উদাহরণে, আমরা একটি Employee Management API ইন্টিগ্রেট করবো, যেখানে Ajax ব্যবহার করে API থেকে ডেটা ফেচ, নতুন ডেটা অ্যাড, আপডেট, এবং ডিলিট করা যাবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax and API Integration Example</title>
<style>
/* টেবিল স্টাইল */
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h1>Employee Management</h1>
<button onclick="fetchEmployees()">Fetch Employees</button>
<button onclick="addEmployee()">Add New Employee</button>
<button onclick="updateEmployee()">Update Employee</button>
<button onclick="deleteEmployee()">Delete Employee</button>
<table id="employee-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
</tbody>
</table>
<div id="message-container" style="margin-top: 20px; color: red;">
<!-- Error বা অন্যান্য মেসেজ এখানে দেখানো হবে -->
</div>
<script>
// সমস্ত এমপ্লয়ির তালিকা ফেচ করা (GET)
function fetchEmployees() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/api/employees", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayEmployees(response);
} else {
displayError("Error fetching employee data. Status: " + xhr.status);
}
}
};
xhr.onerror = function() {
displayError("Network error occurred while fetching data.");
};
xhr.send();
}
// নতুন এমপ্লয়ি অ্যাড করা (POST)
function addEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://example.com/api/employees", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 201) {
var response = JSON.parse(xhr.responseText);
displayEmployees([response]); // নতুন এমপ্লয়ি টেবিলে যোগ করা
} else {
displayError("Error adding employee. Status: " + xhr.status);
}
}
};
var newEmployee = {
name: "Jane Doe",
email: "jane@example.com",
department: "Sales"
};
xhr.send(JSON.stringify(newEmployee));
}
// এমপ্লয়ি আপডেট করা (PUT)
function updateEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("PUT", "https://example.com/api/employees/123", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayEmployees([response]); // আপডেট করা এমপ্লয়ি টেবিলে দেখানো
} else {
displayError("Error updating employee. Status: " + xhr.status);
}
}
};
var updatedEmployee = {
name: "Jane Smith",
email: "jane.smith@example.com",
department: "Marketing"
};
xhr.send(JSON.stringify(updatedEmployee));
}
// এমপ্লয়ি ডিলিট করা (DELETE)
function deleteEmployee() {
var xhr = new XMLHttpRequest();
xhr.open("DELETE", "https://example.com/api/employees/123", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
displayError("Employee deleted successfully", false);
} else {
displayError("Error deleting employee. Status: " + xhr.status);
}
}
};
xhr.send();
}
// এমপ্লয়ির ডেটা টেবিলে রেন্ডার করার ফাংশন
function displayEmployees(data) {
var tbody = document.querySelector("#employee-table tbody");
tbody.innerHTML = ""; // টেবিল ক্লিয়ার করা
data.forEach(function(employee) {
var row = document.createElement("tr");
row.innerHTML = `<td>${employee.id}</td>
<td>${employee.name}</td>
<td>${employee.email}</td>
<td>${employee.department}</td>`;
tbody.appendChild(row);
});
}
// Error বা মেসেজ ডিসপ্লে করার ফাংশন
function displayError(message, isError = true) {
var messageContainer = document.getElementById("message-container");
messageContainer.style.color = isError ? "red" : "green";
messageContainer.innerHTML = message;
}
</script>
</body>
</html>
১. GET রিকোয়েস্ট (fetchEmployees):
GET মেথড ব্যবহার করে সমস্ত এমপ্লয়ির ডেটা ফেচ করা হয়।200 স্ট্যাটাস কোড), ডেটা প্রসেস করে displayEmployees ফাংশনের মাধ্যমে টেবিলে রেন্ডার করা হয়।displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।২. POST রিকোয়েস্ট (addEmployee):
POST মেথড ব্যবহার করে নতুন এমপ্লয়ির ডেটা API এ পাঠানো হয়।201 স্ট্যাটাস কোড), নতুন এমপ্লয়ির ডেটা টেবিলে যোগ করা হয়।displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।৩. PUT রিকোয়েস্ট (updateEmployee):
PUT মেথড ব্যবহার করে একটি নির্দিষ্ট এমপ্লয়ির তথ্য আপডেট করা হয়।200 স্ট্যাটাস কোড), আপডেট করা এমপ্লয়ির ডেটা টেবিলে দেখানো হয়।displayError ফাংশন ব্যবহার করে মেসেজ দেখানো হয়।৪. DELETE রিকোয়েস্ট (deleteEmployee):
DELETE মেথড ব্যবহার করে নির্দিষ্ট ID এর এমপ্লয়ি ডিলিট করা হয়।৫. displayEmployees এবং displayError ফাংশন:
displayEmployees ফাংশন JSON ডেটা প্রসেস করে টেবিলে রেন্ডার করে।displayError ফাংশন API রেসপন্সে কোনো ত্রুটি হলে তা ব্যবহারকারীর জন্য দেখায়।Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
