Tạo mới 1 file html để làm demo nhé.
Bước 1: Tạo form để nhập liệu, bạn viết thế nào thì tùy, ở đây là 1 ví dụ:
HTML:
<form action="">
<input type="text" name="username" placeholder="Nhập username" /> <br>
<input type="text" name="fullname" placeholder="Nhập họ tên" /> <br>
<input type="text" name="email" placeholder="Nhập email" />
<button type="button" onclick="SaveNew()">Save</button>
</form>
Bước 2: Viết code cho hàm SaveNew()
Các bước để làm việc này: 1. Lấy dữ liệu cho vào biến, 2. Kiểm tra hợp lệ, 3. Gọi sự kiện post.
1. Lấy dữ liệu:
JavaScript:
//1. Lấy dữ liệu
var u = document.querySelector("input[name=username]").value;
var n = document.querySelector("input[name=fullname]").value;
var e = document.querySelector("input[name=email]").value;
2. Kiểm tra hợp lệ
JavaScript:
//2. kiểm tra hợp lệ
if (u.length == 0) {
alert('Bạn cần nhập username');
return false;
}
// bạn làm tiếp các kiểm tra khác ở đây
///......
3. Gửi dữ liệu lên Server
JavaScript:
// trước hết là tạo đối tượng để cài dữ liệu vào
var dataPost = {
username: u,
fullname: n,
email: e
};
var url_post = 'http://localhost:3000/user'; // định nghĩa biến lưu địa chỉ post dữ liệu
Sau đó viết hàm để post dữ liệu
JavaScript:
fetch(url_post, {
method: 'POST', // thêm mới thì dùng post
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dataPost), // chuyển dữ liệu object trên thành chuỗi json
})
.then((response) => response.json()) // chuyển kết quả trả về thành json object
.then((data) => {
// bạn có thể làm gì đó với kết quả cuối cùng này thì làm
console.log('Success:', data); // ghi log kết quả hoàn thành
})
.catch((error) => {
console.error('Error:', error); // ghi log nếu xảy ra lỗi
});
Và giờ xem code đầy đủ
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" name="username" placeholder="Nhập username" /> <br>
<input type="text" name="fullname" placeholder="Nhập họ tên" /> <br>
<input type="text" name="email" placeholder="Nhập email" />
<button type="button" onclick="SaveNew()">Save</button>
</form>
<script>
// chức năng thêm mới user
// địa chỉ thêm mới user sẽ là: http://localhost:3000/user
// phương thức sẽ là post
// các bước thực hiện: 1. Lấy dữ liệu cho vào biến, 2. Kiểm tra hợp lệ, 3. Gọi sự kiện post.
function SaveNew() {
//1. Lấy dữ liệu
var u = document.querySelector("input[name=username]").value;
var n = document.querySelector("input[name=fullname]").value;
var e = document.querySelector("input[name=email]").value;
//2. kiểm tra hợp lệ
if (u.length == 0) {
alert('Bạn cần nhập username');
return false;
}
// bạn làm tiếp các kiểm tra khác ở đây
///......
//3. Gửi dữ liệu lên server
// trước hết là tạo đối tượng để cài dữ liệu vào
var dataPost = {
username: u,
fullname: n,
email: e
};
var url_post = 'http://localhost:3000/user';
fetch(url_post, {
method: 'POST', // thêm mới thì dùng post
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(dataPost), // chuyển dữ liệu object trên thành chuỗi json
})
.then((response) => response.json()) // chuyển kết quả trả về thành json object
.then((data) => {
// bạn có thể làm gì đó với kết quả cuối cùng này thì làm
console.log('Success:', data); // ghi log kết quả hoàn thành
})
.catch((error) => {
console.error('Error:', error); // ghi log nếu xảy ra lỗi
});
}
</script>
</body>
</html>
Với việc sửa bạn cũng làm tương tự nhưng khác một chút:
- Ở url thì bạn thêm id vào cuối vd: var url_post = 'http://localhost:3000/user/' +id; với id là biến để bạn gắn vào.
- Ở chỗ method bạn đổi POST thành PATCH
Sau đó sửa tên nút bấm thành SaveUpdate và tên hàm như vậy là có thể chạy được.
Bài viết hướng dẫn chức năng sửa sẽ cập nhật sau.
Lưu ý: Trong bài viết này có dùng một số chuẩn của ES6, chi tiết về ES6 bạn có thể tham khảo trên mạng hoặc đợi bài viết sau. Tạm thời dùng cho các chức năng khác thì bạn chỉ cần thay đổi ở: url, method, dataPost và viết lệnh ở chỗ Success là chạy được.
Link file DB: https://zezo.dev/uploads/javascript/restful-api/db_blog.zip