AJAX Là Gì? Kỹ Thuật Sử Dụng AJAX Với JQUERY | Nền Tảng
Có thể bạn quan tâm
-
Vuexy
- Đăng nhập
-
Files
-
Two new item submitted
Marketing Manager '17kb -
52 JPG file Generated
FontEnd Developer '11kb -
25 PDF File Uploaded
Digital Marketing Manager '150kb -
Anna_Strong.doc
Web Designer '256kb -
Members
-
John Doe
UI designer -
Michal Clark
FontEnd Developer -
Milena Gibson
Digital Marketing Manager -
Anna Strong
Web Designer
- No results found.
-
NỀN TẢNG
AJAX là gì? Kỹ thuật sử dụng AJAX với JQUERY
Chương 5-Bài 6. AJAX là gì? Kỹ thuật sử dụng AJAX với JQUERY Tác giả: Dương Nguyễn Phú Cường #8846 Ngày đăng: Hồi xưa đó Lượt xem: 252 Xem định dạng INAJAX là gì?
AJAX nói ngắn gọn là Kỹ thuật sử dụng để thay đổi một phần giao diện của Trang web (thay vì toàn bộ Trang web)Ví dụ 1:
- Chúng ta có bố cục (layouts) của trang web, bao gồm 4 trang con như sau:
- index.html: Trang chủ
- khoa-hoc.html: Trang hiển thị danh sách khóa học
- gioi-thieu.html: Trang giới thiệu
- lien-he.html: Trang Liên hệ
Cách bước thực hiện AJAX trong dự án Web
- Để thực hiện kỹ thuật AJAX, theo cách đơn giản, thông thường chúng ta phải làm một số bước:
- Tạo một Web API trả về dữ liệu theo định dạng JSON hoặc XML.
- Sử dụng JQUERY $.ajax để gởi yêu cầu (Request GET/POST) đến Web API.
- Khi gọi AJAX bằng JQUERY sẽ trả về 2 hàm trạng thái:
- success: function(data): là hàm dùng để xử lý khi JQUERY gọi AJAX thành công đến API và lấy được dữ liệu mong muốn. Trong hàm này, chúng ta sẽ lấy dữ liệu và hiệu chỉnh HTML trên giao diện theo ý muốn.
- error: function(jqXHR, textStatus, errorThrown): là hàm dùng để xử lý khi JQUERY gọi hàm AJAX bị lỗi. Trong hàm này, chúng ta sẽ hiển thị thông báo lỗi...
Sự khác nhau giữa Content Type và Data Type
Ví dụ sử dụng gọi AJAX Request GET bằng JQUERY $.ajax()
$.ajax('/php/myhand/backend/api/baocao-tongsomathang.php', { success: function(data) { var dataObj = JSON.parse(data); var htmlString = `<h1>${dataObj.SoLuong}</h1>`; $('#baocaoSanPham_SoLuong').html(htmlString); }, error: function(jqXHR, textStatus, errorThrown) { var htmlString = `<h1>Không thể xử lý. Lỗi: ${errorThrown}</h1>`; $('#baocaoSanPham_SoLuong').html(htmlString); } });Ví dụ sử dụng gọi AJAX có kèm dữ liệu Request POST bằng JQUERY $.ajax()
// Chuẩn bị dữ liệu gởi var dulieugoi = { sp_ma: $('#sp_ma').val(), sp_ten: $('#sp_ten').val(), sp_gia: $('#sp_gia').val(), hinhdaidien: $('#hinhdaidien').val(), soluong: $('#soluong').val(), }; console.log((dulieugoi)); // Gọi AJAX đến API ở URL `/php/myhand/frontend/api/giohang-themsanpham.php` $.ajax({ url: '/php/myhand/frontend/api/giohang-themsanpham.php', method: "POST", dataType: 'json', data: dulieugoi, success: function(data) { console.log(data); var htmlString = `Sản phẩm đã được thêm vào Giỏ hàng. <a href="/php/myhand/frontend/thanhtoan/giohang">Xem Giỏ hàng</a>.`; $('#thongbao').html(htmlString); // Hiện thông báo $('.alert').removeClass('d-none').addClass('show'); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus, errorThrown); var htmlString = `<h1>Không thể xử lý</h1>`; $('#thongbao').html(htmlString); // Hiện thông báo $('.alert').removeClass('d-none').addClass('show'); } }); Về trang chủ Về Khóa học Bài học trước Bài học tiếp theoMục lục
Chương trình học
- Bức tranh tổng thể về Lập trình WEB 1
- Sơ đồ vận hành của một Website #1311
- Cài đặt môi trường Lập trình PHP 1
- Các chương trình cần thiết để Lập trình Web #8136
- PHP căn bản 6
- PHP là gì? Viết chương trình PHP đầu tiên #1237
- Các kiểu dữ liệu (data types), biến (variables), hằng số (constant), toán tử (operators) trong ngôn ngữ lập trình PHP #1242
- Bài tập Kiểm tra cú pháp PHP #1285
- Trình diễn (render) dữ liệu Đơn giản ra giao diện (HTML, CSS, JS) sử dụng PHP #8696
- Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP #9564
- Bài tập trình diện (render) tổng hợp: hiển thị mẫu in Hóa đơn bán hàng Nền tảng #11773
- Cấu trúc điều khiển trong PHP
- PHP Nâng cao 7
- Cookie trong PHP #8071
- Session trong PHP #8070
- Session và Cookie trong PHP #8073
- Phân tách cấu trúc URL với PHP #8778
- API là gì? Web API là gì? #8835
- AJAX là gì? Kỹ thuật sử dụng AJAX với JQUERY #8846
- Xử lý (đọc - ghi) file trong PHP #11799
- Bài tập thực hành 3
- Xem Thêm Sửa Xóa (CRUD) với CSDL MySQL trong PHP #8049
- Bài tập thiết kế OOP trong PHP #10169
- Tạo trang hiển thị kết quả thi kết thúc môn WEB #11793
- Thực hiện Dự án PHP thực tế mẫu - sử dụng PHP thuần 3
- Sơ đồ vận hành của trang Web sử dụng PHP #7888
- Khởi tạo cấu trúc thư mục dự án PHP #1358
- Tích hợp Composer vào dự án PHP #8138
- Thu thập và Xử lý dữ liệu từ Client đến Server trong PHP 3
- Thu thập và Xử lý dữ liệu bằng Yêu cầu GET (Request GET) trong PHP #8704
- Thu thập và Xử lý dữ liệu bằng Yêu cầu POST (Request POST) trong PHP #8705
- Bài tập tạo Form Tìm kiếm Thu thập và Xử lý dữ liệu bằng Yêu cầu GET (Request GET) trong PHP #8717
- Thao tác với Cơ sở dữ liệu MySQL 9
- Quy trình (workflow) xử lý thao tác với cơ sở dữ liệu MySQL trong PHP #9623
- Tạo kết nối đến CSDL MySQL trong PHP #8116
- Thực thi câu lệnh INSERT trong PHP #8118
- Thực thi câu lệnh UPDATE trong PHP #8120
- Thực thi câu lệnh DELETE trong PHP #8122
- Thực thi câu lệnh SELECT trong PHP #8124
- Thực thi câu lệnh INSERT với FORM trong PHP #8126
- Thực thi câu lệnh DELETE với FORM trong PHP #8130
- Thực thi câu lệnh UPDATE với FORM trong PHP #8133
- Dự án thực tế mẫu (PHP thuần) - Trang web bán hàng trực tuyến - Thiết kế Backend 17
- Khái niệm về bố cục (layouts) trong thiết kế giao diện Web / App #10538
- Thiết kế bố cục (layouts) cho giao diện Backend sử dụng PHP thuần #8740
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Index #8748
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Create #9291
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Delete #9293
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Edit #9292
- Ràng buộc dữ liệu (validation) #8761
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục cho Liên kết Khóa ngoại #8781
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) upload hình Sản phẩm (upload đơn, mỗi lần 1 file) #8799
- Tạo trang Đăng nhập trong Backend #8823
- Tạo trang Đăng xuất trong Backend #8826
- Tạo Web API lấy dữ liệu báo cáo thống kê #8834
- Tạo trang Bảng tin (Dashboard) #8758
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Index #8856
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - In ấn Print #8858
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Xóa Delete #8862
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Thêm mới Create #8861
- Dự án thực tế mẫu (PHP thuần) - Trang web bán hàng trực tuyến - Thiết kế Frontend 7
- Thiết kế bố cục (layouts) cho giao diện Frontend sử dụng PHP thuần #8868
- Thực hiện Trang chủ Frontend #8873
- Thực hiện Trang Giới thiệu About #8876
- Thực hiện Trang Liên hệ Contact (Có gởi mail Thông báo) #8879
- Thực hiện Trang Chi tiết Sản phẩm Product Detail #8944
- Thực hiện Trang Giỏ hàng Cart #8978
- Thực hiện Trang Thanh toán #9049
- Bảo mật Trang web PHP 2
- Cách hacker tấn công vào Hệ thống bằng cách sử dụng SQL Injection và Cách phòng chống của Quản trị Trang web #9063
- Cách hacker chèn các đoạn mã độc vào Hệ thống bằng cách sử dụng XSS (Cross site scripting) và Cách phòng chống của Quản trị Trang web #9067
- Tài liệu Tham khảo 11
- Tài liệu Tham khảo #7933
- Cách export (dump) cơ sở dữ liệu MySQL bằng HeidiSQL #8343
- Đệ quy đa cấp trong PHP #8495
- Tạo bố cục (layout) trang web sử dụng INCLUDE REQUIRE trong PHP #8523
- Bài tập tổng hợp - Tạo trang web đọc Truyện Tranh và Tiểu Thuyết Online #9006
- Cách triển khai Web lên Hosting free ByetHost #9052
- Nguyên nhân và cách xử lý lỗi Warning: Cannot modify header information - headers already sent by #9917
- Cách triển khai Web lên Hosting free 000WebHost #9959
- Cách tích hợp chứng thực tài khoản bằng Google vào trang web #9973
- Source code Tham khảo Learning.NenTang.vn #10394
- Database mẫu ví dụ Bán hàng Salomon #11808
- Nộp đồ án 1
- Hướng dẫn nộp đồ án Khóa Thiết kế Web PHP + MySQL #9224
- Thao tác với cơ sở dữ liệu MySQL bằng kỹ thuật AJAX 8
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Index #9777
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Create #9781
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit #9783
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Delete #9784
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Index #9773
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Create #9774
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit #9775
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Delete #9776
- Video Live Stream 1
- Thiết kế Web Backend PHP & MySQL - Buổi 1 #9964
- Lập trình hướng đối tượng OOP (Object Oriented Programming) trong PHP 1
- Khái niệm lập trình hướng đối tượng OOP (Object Oriented Programming) trong PHP #11801
Chương trình học
Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...Chương trình học
- Bức tranh tổng thể về Lập trình WEB 1
- Sơ đồ vận hành của một Website #1311
- Cài đặt môi trường Lập trình PHP 1
- Các chương trình cần thiết để Lập trình Web #8136
- PHP căn bản 6
- PHP là gì? Viết chương trình PHP đầu tiên #1237
- Các kiểu dữ liệu (data types), biến (variables), hằng số (constant), toán tử (operators) trong ngôn ngữ lập trình PHP #1242
- Bài tập Kiểm tra cú pháp PHP #1285
- Trình diễn (render) dữ liệu Đơn giản ra giao diện (HTML, CSS, JS) sử dụng PHP #8696
- Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP #9564
- Bài tập trình diện (render) tổng hợp: hiển thị mẫu in Hóa đơn bán hàng Nền tảng #11773
- Cấu trúc điều khiển trong PHP
- PHP Nâng cao 7
- Cookie trong PHP #8071
- Session trong PHP #8070
- Session và Cookie trong PHP #8073
- Phân tách cấu trúc URL với PHP #8778
- API là gì? Web API là gì? #8835
- AJAX là gì? Kỹ thuật sử dụng AJAX với JQUERY #8846
- Xử lý (đọc - ghi) file trong PHP #11799
- Bài tập thực hành 3
- Xem Thêm Sửa Xóa (CRUD) với CSDL MySQL trong PHP #8049
- Bài tập thiết kế OOP trong PHP #10169
- Tạo trang hiển thị kết quả thi kết thúc môn WEB #11793
- Thực hiện Dự án PHP thực tế mẫu - sử dụng PHP thuần 3
- Sơ đồ vận hành của trang Web sử dụng PHP #7888
- Khởi tạo cấu trúc thư mục dự án PHP #1358
- Tích hợp Composer vào dự án PHP #8138
- Thu thập và Xử lý dữ liệu từ Client đến Server trong PHP 3
- Thu thập và Xử lý dữ liệu bằng Yêu cầu GET (Request GET) trong PHP #8704
- Thu thập và Xử lý dữ liệu bằng Yêu cầu POST (Request POST) trong PHP #8705
- Bài tập tạo Form Tìm kiếm Thu thập và Xử lý dữ liệu bằng Yêu cầu GET (Request GET) trong PHP #8717
- Thao tác với Cơ sở dữ liệu MySQL 9
- Quy trình (workflow) xử lý thao tác với cơ sở dữ liệu MySQL trong PHP #9623
- Tạo kết nối đến CSDL MySQL trong PHP #8116
- Thực thi câu lệnh INSERT trong PHP #8118
- Thực thi câu lệnh UPDATE trong PHP #8120
- Thực thi câu lệnh DELETE trong PHP #8122
- Thực thi câu lệnh SELECT trong PHP #8124
- Thực thi câu lệnh INSERT với FORM trong PHP #8126
- Thực thi câu lệnh DELETE với FORM trong PHP #8130
- Thực thi câu lệnh UPDATE với FORM trong PHP #8133
- Dự án thực tế mẫu (PHP thuần) - Trang web bán hàng trực tuyến - Thiết kế Backend 17
- Khái niệm về bố cục (layouts) trong thiết kế giao diện Web / App #10538
- Thiết kế bố cục (layouts) cho giao diện Backend sử dụng PHP thuần #8740
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Index #8748
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Create #9291
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Delete #9293
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục Phẳng - Edit #9292
- Ràng buộc dữ liệu (validation) #8761
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) cho danh mục cho Liên kết Khóa ngoại #8781
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) upload hình Sản phẩm (upload đơn, mỗi lần 1 file) #8799
- Tạo trang Đăng nhập trong Backend #8823
- Tạo trang Đăng xuất trong Backend #8826
- Tạo Web API lấy dữ liệu báo cáo thống kê #8834
- Tạo trang Bảng tin (Dashboard) #8758
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Index #8856
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - In ấn Print #8858
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Xóa Delete #8862
- Tạo chức năng Quản lý Đơn hàng dạng Master Detail (lưu một dòng cha và nhiều dòng con) - Thêm mới Create #8861
- Dự án thực tế mẫu (PHP thuần) - Trang web bán hàng trực tuyến - Thiết kế Frontend 7
- Thiết kế bố cục (layouts) cho giao diện Frontend sử dụng PHP thuần #8868
- Thực hiện Trang chủ Frontend #8873
- Thực hiện Trang Giới thiệu About #8876
- Thực hiện Trang Liên hệ Contact (Có gởi mail Thông báo) #8879
- Thực hiện Trang Chi tiết Sản phẩm Product Detail #8944
- Thực hiện Trang Giỏ hàng Cart #8978
- Thực hiện Trang Thanh toán #9049
- Bảo mật Trang web PHP 2
- Cách hacker tấn công vào Hệ thống bằng cách sử dụng SQL Injection và Cách phòng chống của Quản trị Trang web #9063
- Cách hacker chèn các đoạn mã độc vào Hệ thống bằng cách sử dụng XSS (Cross site scripting) và Cách phòng chống của Quản trị Trang web #9067
- Tài liệu Tham khảo 11
- Tài liệu Tham khảo #7933
- Cách export (dump) cơ sở dữ liệu MySQL bằng HeidiSQL #8343
- Đệ quy đa cấp trong PHP #8495
- Tạo bố cục (layout) trang web sử dụng INCLUDE REQUIRE trong PHP #8523
- Bài tập tổng hợp - Tạo trang web đọc Truyện Tranh và Tiểu Thuyết Online #9006
- Cách triển khai Web lên Hosting free ByetHost #9052
- Nguyên nhân và cách xử lý lỗi Warning: Cannot modify header information - headers already sent by #9917
- Cách triển khai Web lên Hosting free 000WebHost #9959
- Cách tích hợp chứng thực tài khoản bằng Google vào trang web #9973
- Source code Tham khảo Learning.NenTang.vn #10394
- Database mẫu ví dụ Bán hàng Salomon #11808
- Nộp đồ án 1
- Hướng dẫn nộp đồ án Khóa Thiết kế Web PHP + MySQL #9224
- Thao tác với cơ sở dữ liệu MySQL bằng kỹ thuật AJAX 8
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Index #9777
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Create #9781
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit #9783
- Tạo API cho chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Delete #9784
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Index #9773
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Create #9774
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit #9775
- Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Delete #9776
- Video Live Stream 1
- Thiết kế Web Backend PHP & MySQL - Buổi 1 #9964
- Lập trình hướng đối tượng OOP (Object Oriented Programming) trong PHP 1
- Khái niệm lập trình hướng đối tượng OOP (Object Oriented Programming) trong PHP #11801
Menu Tiện ích
- Trang chủ Chia sẻ Facebook Liên hệ Hỏi đáp/Chat trợ giúp
Menu Hướng dẫn Học tập
- Nhắc nhở
- Các bước cần thực hiện
❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜
Thực hiện các bước tuần tự theo nội dung Bài học nhé!
Từ khóa » Học Ajax Trong Jquery
-
JQuery Ajax Và Kiến Thức Cơ Bản - Viblo
-
Bạn Đã Biết Sử Dụng AJAX Với JQuery Chưa? - CodeLearn
-
Học Ajax - PHP Ajax - JQuery Ajax
-
Sử Dụng Jquery Ajax | Lê Vũ Nguyên Dạy Học Lập Trình
-
Hướng Dẫn JQuery Ajax Toàn Tập - Thien An Blog
-
AJAX Sử Dụng JQuery | V1Study
-
Học Lập Trình Web A-Z - JQuery- Bài 07 - Ajax Trong JQuery - YouTube
-
AJAX Là Gì? Cách Sử Dụng Ajax Tối ưu Nhất Cho Website
-
Học AJAX Cơ Bản Và Nâng Cao - Hoclaptrinh
-
Ajax Là Gì? Sử Dụng Ajax Jquery Cho Web App Như Thế Nào?
-
Học AJAX Cơ Bản Và Nâng Cao
-
AJAX Là Gì? Cách Thức Hoạt động Và Lợi ích Mà Nó Mang Lại | TopDev
-
Sử Dụng Ajax Trong Jquery - Thầy Long Web
-
Phương Thức .get() Và .post() Trong JQuery Ajax - Quách Quỳnh