Jquery ajax và một số ví dụ cơ bản

837 lượt xem 3 năm trước
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

Jquery ajax và một số ví dụ cơ bản

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

<script src="https://gist.github.com/TrungPhuNA/d8ffcac9020fed8226de415825ec3c54.js"></script>

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

Ajax

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à

Ajax demo

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

Hình ảnh sau khi call ajax

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.

Bài viết liên quan

123code.net - Tạo cảm giác an toàn, uy tín, chất lượng đến cho mọi người

123code.net mang lại cảm giác an toàn nhất cho bạn, không làm bạn thất vọng, giúp bạn giải quyết được vấn đề đồ án tốt nghiệp ở thời điểm hiện tại và tương lai

- Đưa ra giải pháp, góp ý giúp bạn có được một đề tài đồ án tốt, phù hợp nhất

- Có nhiều tính năng mới, độc giúp thu hút, thuyết phục được giáo viên phản biện cũng như hội đồng bảo vệ đồ án

- Đúng ngày, đúng giờ, đầy đủ yêu cầu - tính năng

=> Nhanh tay đăng ký hoạc liên hệ với admin tại đây để có được một đồ án phù hợp với mình

123code.net

Bài viết nhiều người đọc

Hướng Dẫn Thêm SSH Key Vào Server Để Kết Nối Mà Không Cần Nhập Mật Khẩu

2025-03-17 09:50:35

Khi làm việc với server qua SSH, việc nhập mật khẩu mỗi lần kết nối có thể gây phiền toái. Để giải quyết vấn đề này, bạn có thể sử dụng SSH key. Bài viết này sẽ hướng dẫn bạn cách tạo và thêm SSH key vào server của mình.

Hướng Dẫn Vẽ Tableau Chuyên Nghiệp Cho Đồ Án Tốt Nghiệp

2025-03-02 22:39:25

123code Hướng Dẫn Vẽ Tableau Chuyên Nghiệp Cho Đồ Án Tốt Nghiệp

Cài đặt composer centos 7

2025-02-18 15:14:39

Tổng hợp các lệnh cài đặt composer trên centos 7

Cài đặt php trên vps centos 7

2025-02-18 14:50:17

Hướng dẫn tổng hợp các câu lệnh cài đặt php trên centos 7

Hot Khám Phá Tableau: Phần Mềm BI Hàng Đầu Cho Phân Tích Dữ Liệu và Trực Quan Hoá

2024-12-06 11:40:11

Tableau là công cụ phân tích dữ liệu mạnh mẽ, được sử dụng rộng rãi trong ngành Business Intelligence (BI)

Tạo User và Mật khẩu gán quyền trên vps

2024-12-04 17:35:51

Cách tạo user và mật khẩu cũng như gán quyền trên vps

Cách public port mysql lên url

2024-11-25 09:54:36

Cách public port mysql lên url một cách đơn giản nhưng không nên lạm dụng

Hot Sử dụng Tableau trong Đồ Án Tốt Nghiệp: Bí Quyết Thành Công

2024-11-19 15:03:51

Tableau là một công cụ trực quan hóa dữ liệu mạnh mẽ, được sử dụng rộng rãi trong lĩnh vực phân tích dữ liệu. Với khả năng kết nối đa dạng các nguồn dữ liệu, Tableau giúp sinh viên:

Hot Tổng quan về Tableau: Công cụ phân tích dữ liệu hàng đầu cho đồ án CNTT

2024-11-14 21:14:36

Tableau không chỉ là một công cụ mạnh mẽ mà còn là một lựa chọn tuyệt vời cho các bạn sinh viên và những ai đang làm đồ án CNTT cần phải phân tích và trình bày dữ liệu

Một số gợi ý đề tài đồ án tốt nghiệp do Chatgtp support gợi ý

2023-02-11 15:32:22

Tổng hợp các đề tài đồ án tốt nghiệp khá là hay do AI gợi ý cho chúng ta