Điểm mấu chốt xây dựng ứng dụng web là dùng HTTP request. HTTP request cho phép thu thập dữ liệu từ input người dùng rồi gửi qua backend đến server. Sau đó nhận response trả về.
Đôi khi request gửi dữ liệu lưu vào database, như POST request. Request phổ biến khác nhận response và hiển thị cho user. Đó là GET request. jQuery có phương thức get() làm cho việc gửi request trở nên streamlined (trơn tru, hiệu quả).
jQuery get() là gì?
jQuery get() là phương thức gửi GET request đến URL endpoint và nhận response. Response là dữ liệu gửi lại từ server. Khác với POST request, GET request chỉ nhận dữ liệu có sẵn từ server. Nó không lưu gì vào database.
GET request hữu ích yêu cầu tập con dữ liệu cụ thể và làm gì đó với nó. Ví dụ: xây dựng app thương mại điện tử, gửi GET request đến URL endpoint truy cập sản phẩm. Lấy dữ liệu nhận trong response, định dạng tạo card layout tất cả sản phẩm mua được.
jQuery get() chịu trách nhiệm gửi request đến URL và nhận dữ liệu làm response. Developer giờ có quyền truy cập dữ liệu từ server và chọn hiển thị cho user như mong muốn.
Đã hiểu GET request, xem cú pháp phương thức get().
Cú pháp get() jQuery
jQuery làm cho việc gửi GET request đơn giản. get() nhận địa chỉ URL dạng chuỗi và hàm callback nhận dữ liệu. Cơ bản, callback function là hàm truyền cho phương thức để thực thi lúc sau.
Xem giải thích sâu hơn về callback functions, xem guide này.
Có vài đối số tùy chọn get() chấp nhận, nhưng phổ biến nhất là URL và callback function.
Giữ ví dụ e-commerce, xem GET request cơ bản dùng get():
$.get('/products', (data) => {
console.log(data)
})
Gọi get() truyền URL dạng chuỗi. Request gửi đến trang index sản phẩm và server gửi lại dữ liệu. Hàm callback chấp nhận vài đối số, nhưng data và status đủ cho mục đích.
Data đại diện dữ liệu nhận từ request. Trong ví dụ, chỉ output trả về trong console. jQuery built-in nhận diện vài kiểu dữ liệu, nhưng nhiều khả năng nhận JSON object.
Cần code thêm trích xuất thông tin mong muốn từ JSON object. Xem cách làm.
Ví dụ jQuery get()
Ví dụ này dùng API vui. Trang cho biết bao nhiêu phi hành gia đang ở vũ trụ! Cũng cho tên và tàu vũ trụ. Bắt đầu truyền URL cho get():
$.get('https://api.open-notify.org/astros.json', (data) => {
console.log(data)
})
Khi gửi request, nhận response log trong console:
Từ URL, đã biết sẽ nhận JSON object từ server. Trong console, thấy keys "message", "number", "people". Giá trị message "success" giúp error handling.
Key "number" chỉ số lượng người ở vũ trụ. "People" trỏ đến giá trị chứa mảng đối tượng. Từ đây, có thể lặp qua mảng "people" hiển thị thông tin cho user dạng danh sách. Nhận dữ liệu như vậy để developer tự chọn cách hiển thị.
Kết luận
Ta đã xem lại GET request là gì và jQuery làm cho nó nhanh, đơn giản. Sau khi quen cú pháp phổ biến, thấy get() thực tế. Quan trọng lưu ý: dữ liệu có thể lặp và render từ body của callback function.
Từ đây, dự án vui có thể tra API đơn giản xây dựng project nhỏ thực hành gửi GET request và hiển thị dữ liệu. Nhận và render dữ liệu cách dễ nhìn là bước đầu thành developer thành thạo.