ICTsharing - Blog chia sẻ kiến thức về ICT: Lập trình ajax

Hot

Post Top Ad

Hiển thị các bài đăng có nhãn Lập trình ajax. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Lập trình ajax. Hiển thị tất cả bài đăng

Thứ Tư, 5 tháng 12, 2018

Kỹ thuật xử lý Ajax - bài 2

17:44 0
Ở bài 2 về kỹ thuật xử lý Ajax này chúng ta sẽ học được:
 - Ở bài đầu tiên sử dụng hàm .load() gặp phải nhược điểm nó load toàn bộ những gì có trong trang B về trang A.
 - Bài này sử dụng hàm .get() hoặc hàm post() để lấy dữ liệu tùy biến từ trang B.

Cấu trúc như sau:
$.get("link_toi_trang_khac" , {tham_so_truyen_vao} , function(data){ $(".noidung").html(data);   });
Ví dụ:
$.get("b.php" , {tuoi:"20 tuổi"}, function(data){ $("#noidung").html(data); });
 Trang b.php


Trang a.php


Kết quả khi chạy:


Sử dụng tương tự với .POST
Xem thêm

Kỹ thuật xử lý Ajax - bài 1

16:41 0
Kỹ thuật xử lý Ajax trong một số trường hợp rất quan trọng trong trường hợp xử lý phân trang hoặc load dữ liệu từ database mà không làm ảnh hưởng tới các vị trí bên cạnh. Giúp tiết kiệm tài nguyên cho web.

Sau bài này bạn sẽ hiểu được:

- Ajax là gì? khi nào nên sử dụng Ajax.

- Gọi hàm Ajax với Jquery


1. Ajax là gì? khi nào nên sử dụng Ajax.

Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao:

• Gửi yêu cầu (request) đến máy chủ mà không cần nạp lại trang
• Phân tách và làm việc với XML

Vậy khi nào nên sử dụng ajax:

1. Tính năng "Auto save" (lưu tự động): Sử dụng Ajax, bạn có thể bắt chước tính năng của các phần mềm soạn thảo tự động lưu những gì người dùng đã gõ được sau một khoản thời gian nhất định (sẽ thật tuyệt nếu như các trình webmail có tính năng này.


2. Kiểm tra trùng lặp: bạn tạo ra một mẫu đơn đăng ký với yêu cầu là tên đăng nhập phải không bị trùng lặp với bất kỳ ai trong cơ sở dữ liệu. Ajax sẽ giúp bạn kiểm tra trực tiếp trên trình duyệt của bạn xem các thông tin có bị trùng lặp không?  (khi bạn đăng ký gmail chẳng hạn)

3. Dịch trực tuyến: bạn có thể sử dụng Ajax để tạo ra tính năng cho phép người dùng chỉ cần chọn một từ trên trang web của bạn và hiển thị từ tương ứng của các ngôn ngữ khác (sử dụng các dịch vụ của các trang tự điển)

4. Các trang bán hàng trực tuyến: cập nhật theo thời gian thực danh sách những gì người mua chọn và giá cả mà không cần phải tải lại trang web (ví dụ người dùng nhấn chọn thêm một mặt hàng, ngay lập tức nó xuất hiện trong danh sách bên cạnh và tổng giá tiền cũng sẽ được cập nhật tương ứng)

5. Hệ thống đánh giá ở các trang web nhạc số: Người dùng nhấn một nút đánh giá và ngay lập tức nó sẽ được cập nhật vào hệ thống (hai trang Nhạc Số và Nhạc Việt có lẽ nên tìm hiểu áp dụng kỹ thuật này)

Ví dụ:
- Tạo một trang A có nội dung: Đây là nội dung của trang A
- Tạo một trang B có nội dung: Đây là nội dung của trang B.
Sử dụng kỹ thuật Ajax để xử lý khi mở trang A ra thì nó tự động hiển thị cả nội dung trang B. 

Ta có code nội dung trang A như sau:
 a.php

Trong đó chú ý:
Link thư viện của jquery
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Sử dụng hàm .load để load trang b.php

Ta có nội dung trang B như sau:
 b.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Trang B</title>
</head>
<body>
<p>Đây là nội dung Trang B</p>
</body>

</html>

Kết quả khi vào trang A sẽ hiển thị nội dung như hình ảnh sau:
Xem thêm

Post Top Ad

Your Ad Spot