Xử lí API với Jquery

1. HTTP :
HTTP là các giao thức giữa client và server theo cặp request - response :
- Client gửi HTTP request đến Server
- Server nhận Request -> thực hiện xử lí Request
- Server trả về HTTP Response đến client

Các giao thức này chứa các văn bản thô mà từ đó máy tính có thể diễn giải thành các hành động, nội dung, ...
Các loại Request HTTP :
 GET : Lấy dữ liệu từ Server
POST : Gửi dữ liệu đến Server để tạo mới một tài nguyên
PUT : Gửi dữ liệu đến Server để cập nhật tài nguyên đã có
DELETE: Xoá tài nguyên

Một số HTTP Response phổ biến như :

200 OK : Xử lí yêu cầu thành công và phản hồi dữ liệu được yêu cầu
400 Not Found : Tài nguyên được yêu cầu không tồn tại
500 Internal Server Error : Máy chủ gặp lỗi khi xử lí yêu cầu và không thể hoàn thành
302 Found (Redirect) : Người dùng phải thực hiện một Request khác với một URL mới.

2. API là gì :
API - Application Programming Interface. Là một phần trung gian phần mềm cho phép 2 ứng dụng trao đổi dữ liệu với
nhau.
 Ví dụ với API ta có thể truy xuất dữ liệu để chuyển đổi chúng thành các nội dung trên trang web để hiển thị.

2. Xử lí API bằng ajax() của Jquery :

AJAX là một kĩ thuật để tải dữ liệu lên từ máy chủ và xử lí mà không cần phải tải lại toàn bộ trang chủ. Giúp tối ưu hiệu
năng của trang web.

2.1. Cấu trúc của hàm ajax() :

 Cấu trúc của một hàm ajax() được sử dụng để xử lí dữ liệu của API gồm 4 phần chính :
url : Chỉ định nguồn tài nguyên sẽ truy cập
method : Phương thức HTTP được sử dụng
success : Thực hiện các câu lệnh nếu gọi AJAX thành công
error : Thực hiện các câu lênj nếu gọi AJAX thất bại

Ví dụ :

js
1 $.ajax({
2 url: "http://localhost:1337/api/thong-tin-saches/?populate=*",
3 method: "GET",
4 success: function (data) {
5 console.log("Data Loaded Successfully");
6 toTable(data["data"]);
7 },
8 error: function (err) {
9 console.log("Error loading data: ", err);
10 },
11 });

2.2. ajax() trong các method khác nhau :

2.3.1. GET :
 Khi sử dụng ajax với phương thức GET, cú pháp sẽ tương tự như ở trên

2.3.2. POST :
Khi ta sử dụng với POST, ta cần truyền thêm một thuộc tính là data . Thuộc tính này sẽ chứa dữ liệu mà người dùng
muốn gửi tới Server. Ngoài ra, ta cần phải đảm bảo truyền đúng kiểu dữ liệu và cấu trúc dữ liệu mà Server yêu cầu.
Ví dụ :

$.ajax({
url: "http://localhost:1337/api/thong-tin-saches/?populate=*",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
data: {
maSach: maSach,
tenSach: tenSach,
tenTacGia: tenTacGia,
the_loai: {
id: theLoai,
},
namXuatBan: namXuatBan,
},
}),
2.3.3. PUT :

Đối với PUT, ta cũng cần phải truyền thêm thuộc tính data . Ngoài ra còn phải chỉ rõ ra phần tử cần thay đổi thông
tin. Như trong ví dụ trên, POST được sử dụng để tạo một tài nguyên mới nên sẽ truy cập đến toàn bộ thông tin. Còn
trong ví dụ dưới, PUT sẽ cập nhật đến một tài nguyên được chỉ định :

$.ajax({
url:
"http://localhost:1337/api/thong-tin-saches/" +
id +
"?populate=*",
method: "PUT",
contentType: "application/json",
data: JSON.stringify({
data: {
maSach: maSach,
tenSach: tenSach,
tenTacGia: tenTacGia,
the_loai: {
id: theLoai,
},
namXuatBan: namXuatBan,
},
})
2.3.4. DELETE :

Tương tự PUT, vì ta cần xoá một tài nguyên nhất định, nên ta cũng cần chỉ định ra phần tử. Khi này, ta không cần phải
truyền vào dữ liệu nào nữa nên không cần data :

$.ajax({
url: "http://localhost:1337/api/thong-tin-saches/" + id,
method: "DELETE",
success: function () {
console.log("Data Deleted Successfully");
loadTable();
toast("Xoá sách thành công");
},
error: function (err) {
console.log("Error deleting data: ", err);
toast("Xoá sách thất bại");
},
});

3. Ví dụ thực hành với API :

3.1. Lấy thông tin từ một API :

 $(document).ready(function () {
$.ajax({
url: "http://localhost:1337/api/thong-tin-saches/?populate=*",
method: "GET",
success: function (data){
console.log(data);
},
error: function (error){
console.log(error);
}
})
})

3.2. Cập nhật thông tin của Server thông qua API :

$(document).ready(function () {
$.ajax({
url: "http://localhost:1337/api/thong-tin-saches/?populate=*",
method: "POST",
contentType: "application/json",
data: JSON.stringify({
data: {
maSach: "masach3",
tenSach: "tenSach1",
tenTacGia: "tacgia1",
 namXuatBan: "2024",
},
}),
success: function () {
console.log("Update successfully");
},
error: function (err) {
console.log(err);
}
})
})

3.3. Sửa thông tin của Server :

$(document).ready(function () {
$.ajax({
url:
"http://localhost:1337/api/thong-tin-saches/" +
15 +
"?populate=*",
method: "DELETE",
contentType: "application/json",
data: JSON.stringify({
data: {
maSach: "maSachMoi",
 tenSach: "tenSachMoi",
tenTacGia: "tenTacGiaMoi",
namXuatBan: "2023",
}
}),
success: function () {
console.log("Modify successfully");
}
error: function (err) {
console.log(err);
}
})
})

3.4. Xoá thông tin của Server :

$(document).ready(function () {
$.ajax({
url: "http://localhost:1337/api/thong-tin-saches/" + 131,
method: "DELETE",
success: function () {
console.log("Delete success");
},
error: function (err) {
console.log(err);
 }
})
})