Một số ví dụ về xử lý jquery

Tìm hiểu Jquery ajax và một số ví dụ cơ bản để các bạn hiểu rõ hơn về nó. Cách sử dụng như thế nào

Ở bài trước mình đã nói qua một số khái niệm rồi và ở bài này mình sẽ demo qua một ví dụ về ajax và các thành phần của nó.

Thư viện

Có 2 cách để add thư viện jquery vào project của mình

  1. Bạn có thể sử dụng cdn: Các bạn truy cập vào website https://cdnjs.com/libraries/jquery/ và chọn cho mình 1 phiên bản phù hợp nhé
  2. Download jquery về và gọi vào như các bạn gọi các file css hoạc js thông thường

Ví dụ sử dụng ajax load nội dung.

Cấu trúc thư mục example như sau

Một số ví dụ về xử lý jquery

Cấu trúc example

Mình có một thư mục là ajax và 2 file html là content và index.html

Nội dung của file index.html như sau

Và nội dung file content.html là 

Một số ví dụ về xử lý jquery

Nội dung file content.html

Mình sẽ mô tả qua một chút về ví dụ này.

  1. Đầu tiên khi chạy project thì dữ liệu file content.html chưa được load ra
  2. Sau khi click vào btn có nội dung là "Click để load file" thì nội dung file content.html sẽ được load ra và append vào 1 thẻ div được bao quanh nó và có id="result".

Demo ví dụ

Khi chưa click vào "click để load file" thì nội dung sẽ là

Một số ví dụ về xử lý jquery

Hình ảnh trước khi click thực hiện ajax

Và sau khi click vào để load nội dung bằng ajax thì nội dung sẽ được load như sau

Một số ví dụ về xử lý jquery

Hình ảnh sau khi load nội dung bằng ajax 

Các thuộc tính được sử dụng trong ví dụ trên

Trong ví dụ trên thì mình đã sử dụng một vài thuộc tính cơ bản sau

  • url : là đường dẫn mà mình muốn ajax call tới để xử lý hoạc lấy nội dung. Ở trong bài này thì url của mình chính là file content.html 
  • type : Là phương thức được sử dụng. Ở trong bài này mình sử dụng phương thức GET

và còn nhiều thuộc tính khác nữa ở bài tiếp theo mình sẽ liệt kê và nêu ra cách dùng cũng như công dụng của nó .

Tổng kết

Hi vọng qua bài này các bạn sẽ hiểu được nôm na cách dùng và sử dụng ajax như thế nào.

Một số ví dụ về xử lý jquery

Hôm trước mình đã show sản phẩm mới ở trang chủ. Tiếp tục bài này mình sẽ show sản phẩm nổi bật ở trang chủ

Xem thêm

Một số ví dụ về xử lý jquery

Mình sử dụng jenssegers/agent để detect màn hình hiện tại là desktop hay mobile để mình show sản phẩm ở dạng slide sao cho phù hợp

Xem thêm

Một số ví dụ về xử lý jquery

Ở trang chủ mình có thể show rất nhiều thứ ở đó. Nhưng phần này tạm thời mình sẽ show sản phẩm mới trước đã

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình sẽ hiển thị danh mục sản phẩm. Ở đây mình sẽ hiển thị danh mục cấp một trước nhé.

Xem thêm

Một số ví dụ về xử lý jquery

Tiếp tục seri mình sẽ ghép nốt trang chi tiết sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Bài tiếp theo mình sẽ tạo route và ghép giao diện trang danh sách sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Giao diện trang chủ và file master dùng chung

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình sẽ chuyển qua frontend. Code bên admin sau vài bài lại quay về làm tiếp nhé. Mình sẽ tạo các controller, thư mục frontend, định nghĩa home route

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình sẽ xử lý phần upload hình ảnh sản phẩm và hiển thị ảnh sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Tạo file function và tạo hàm upload hình ảnh

Xem thêm

Một số ví dụ về xử lý jquery

Tiếp tục phần sản phẩm thì mình sẽ làm tiếp phần delete , active, hot cho phần sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Tiếp tục seri mình sẽ làm phần cập nhật thông tin sản phẩm. Các bạn chú ở bài này mình sẽ chỉ sử dụng một form cho phần update và insert thôi

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình sẽ lưu thông tin sản phẩm và hiển thị sản phảm

Xem thêm

Một số ví dụ về xử lý jquery

Bài trước mình đã hiện thị form thêm mới sản phẩm. Bài này mình sẽ tạo file và xử lý validate form thêm sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình đã tạo sẵn phần form thêm mới sản phẩm, đồng thời cũng tạo cả route để xử lý cho phần sản phẩm

Xem thêm

Một số ví dụ về xử lý jquery

Tiếp tới bài này mình sẽ tạo csdl phần product, mình sẽ tạo tạm một số trường để đủ dùng còn thiếu đâu mình sẽ bổ sung sau nhé.

Xem thêm

Một số ví dụ về xử lý jquery

Bài này mình sẽ xử lý nốt phần còn lại của quản lý, thêm, sửa xoá từ khoá cũng như active từ khoá nổi bật.

Xem thêm

Một số ví dụ về xử lý jquery

Trước đó mình đã tạo xong csdl cho bảng từ khoá. Tiếp theo mình sẽ tạo model, controller, request để xử lý thêm, hiển thị từ khoá, view thì mình đã tạo từ bài trước đó rồi nhé

Xem thêm

Một số ví dụ về xử lý jquery

Tiếp tục phần thứ hai này mình sẽ tạo phần quản lý từ khoá. Đầu tiên là tạo csdl và folder chứa keyword

Xem thêm

Một số ví dụ về xử lý jquery

Trong bài này mình sẽ làm nhanh phần cập nhật danh mục sản phẩm, xoá danh mục sản phẩm

Xem thêm