REST API - Dùng hàm FETCH để sửa một bản ghi - P2

Bước 5: Viết code cho hàm SaveUpdate() khi người dùng nhập thông tin mới xong bấm nút SaveUpdate
Hàm này lại viết ở cuối cùng

JavaScript:

// hàm này chạy khi bấm nút Save Update
        function SaveUpdate() {
            //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
            };

            // lấy id bản ghi cần sửa để cho vào url:
            var id_edit = document.querySelector("#form_edit").getAttribute('id_edit');

            var url_post = 'http://localhost:3000/user/' + id_edit; // nối vào url để cho hợp lệ.

            fetch(url_post, {
                    method: 'PATCH', // sửa thì dùng phương thức PATCH
                    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

                    if (data.id == id_edit) {
                        alert('Đã cập nhật thành công');
                        // xóa rỗng các ô textbox ở form
                        document.querySelector("input[name=username]").value = '';
                        document.querySelector("input[name=fullname]").value = '';
                        document.querySelector("input[name=email]").value = '';
                        document.querySelector("#form_edit").removeAttribute('id_edit'); // xóa cả cái id vừa gắn vào
                    }

                })
                .catch((error) => {

                    console.error('Error:', error); // ghi log nếu xảy ra lỗi
                });
        }

Code hoàn chỉnh bạn xem ở phần đính kèm. Chú ý: Code này sau khi người dùng bấm SaveUpdate xong thì nó chưa load lại trang nên bạn bấm F5 để xem kết quả thay đổi nhé.

Bài viết tiếp theo sẽ hướng dẫn bạn sửa cho tự động load lại dữ liệu.

Tài nguyên: https://zezo.dev/uploads/javascript/restful-api/edit-user.zip