Hướng dẫn jquery ajax php
Danh sách các bài viết trong chuyên mục PHP Ajax, đây là những bài viết mới nhất được cập nhật trong mục PHP Ajax.
Ajax là một kỹ thuật thường sử dụng trong các ứng dụng website 2.0 bởi vì nó giúp các thao tác trên website trở nên nhanh và chuyên nghiệp hơn. Đối với một PHP developer mà không sử dụng được kỹ thuật này thì quả thật là bất lợi khi đi xin việc làm đấy.
Hồi trước khi học Ajax mình hay mơ hồ không biết bắt đầu từ đâu? Nguồn học nào hay? Một
phần vì hồi đó nhà không có điều kiện nên có kết nối internet, vì vậy mình cũng không biết trên internet lại có một nguồn học vô tận như vậy. Nghĩ lại thấy mình hồi đó thật tồi tệ.
Nhưng bây giờ thì khác, nhà nhà đều có mạng nên bạn sẽ dễ dàng hơn rất nhiều. Tuy tuts nhiều nhưng mình thấy các nguồn học PHP Ajax hiện nay tuy nhiều nhưng vẫn rời rạc, vì vậy mình tạo chuyên đề học Ajax này nhằm giúp bạn khỏi mất công đi tìm nhiều nơi để giải quyết một vấn đề đơn giản.
Trọng tâm chủ yếu
của chuyên đề này là đề cập đến cách sử dụng ajax và thư viện jquery khi thao tác với Ajax. Vì mỗi website sẽ có những chức năng khác nhau phụ thuộc vào yêu cầu của dự án nên mình không thể trình bày hết các ví dụ được. Nhưng nếu bạn đã xem và hiểu hết tất cả các bài học ajax thì nó không còn khó đối với bạn nữa.
+PHP AJAX
| 1
| Ajax là gì? Viết chương trình Ajax bằng Javascript
|
| 2
| Tìm hiểu jQuery Ajax
|
| 3
| Phương thức POST trong jQuery Ajax
|
| 4
| Phương thức GET trong jQuery Ajax
|
| 5
| Sử dung Ajax kết quả trả về kiểu Text
|
| 6
| Sử dụng Ajax lấy kết quả trả về dạng XML
|
| 7
| Sử dụng Ajax kết quả trả về kiểu JSON
|
| 8
| Validate form đăng ký thành viên với Ajax
|
| 9
| Phân trang ajax có thay đổi URL cho SEO
|
| 10
| Xử lý tiến trình khi làm việc với ajax
|
| 11
| Viết thư viện captcha và kiểm tra mã captcha bằng ajax
|
| 12
| Search ajax Autocomplete có phân trang
|
| 13
| Delay the keyup event for jquery ajax
|
| 14
| jQuery Ajax scrolling pagination với PHP và MYSQL
|
| 15
| jQuery Ajax pagination load more với PHP và MYSQL
|
| 16
| Kỹ thuật xử lý hàng đợi khi gửi ajax
|
| 17
| Validate form Modal Bootstrap với jQuery Ajax
|
| 18
| Hướng dẫn crawl dữ liệu trang chonbaihat bằng Ajax + PHP
|
Giới thiệu
Load dữ liệu
Và trong cặp thẻ “ ”:
$[document].ready[function[] {
$['#load-du-lieu'].click[function[e] {
e.preventDefault[];
console.log[$['#noidung'].load['vidu1.html']];
}];
}];Và như các bạn thấy trong đoạn code ở cặp thẻ “ ”, các bạn thấy được tôi có sử dụng một file HTML khác là “vidu1.html” để chúng ta sẽ load dữ liệu từ nó vào. Các bạn sẽ được cấu trúc đầy đủ và lưu tên file là “index.html” [Tên “index”
các bạn có thể tự đặt] như sau:
Hướng dẫn jQuery Ajax - Thienanblog.com
Load dữ liệu
$[document].ready[function[] {
$['#load-du-lieu'].click[function[e] {
e.preventDefault[];
$['#noidung'].load['vidu1.html'];
}];
}];
Cấu trúc file “vidu1.html” sẽ như sau:
Đây là vidu1.html
Chuỗi cần lấy tiếp theo
Chúng ta sẽ có cấu trúc thư mục tổng thể như sau trong ví dụ này:
Và trong cặp thẻ “” tôi
sẽ nhắc lại một số cú pháp tôi đã xài để bạn nào quên hoặc chưa biết thì có thể tìm hiểu lại:
- $[document].ready[function[]{…}] : tương tự với sự kiện “onload ”, có nghĩa là code của bạn chỉ được thực thi khi trang được load hoàn tất.
- Sự kiện “click ” đối số mặc định “e” được sử dụng phương thức “preventDefault[] ” giúp chặn lại việc load lại trang từ trình duyệt.
- $[‘#id-can-lay’]
: trỏ tới thẻ HTML mà các bạn cần lấy có “id ” là “#id-can-lay ”. Tương tự với việc các bạn sử dụng cho “class ”.
- load[] : có đối số là đường dẫn đến file các bạn cần lấy.
Và bây giờ, chúng ta hãy thử chạy Ví dụ trên xem thế nào nhé:
Bước 1: Load file “index.html” mà chúng ta đã xây dựng bên trên:
Bước 2: Nhấn vào nút “Load dữ liệu” và chạy thử:
Như vậy, sau 2 bước trên chúng ta đã load thành công dữ liệu từ “vidu1.html” rồi đấy. Và một câu hỏi đặt ra, đó chính là có cách nào mà chúng ta có thể chỉ lấy chuỗi mà chúng ta cần sau khi load dữ liệu vào hay không? Các bạn hãy xem lại cấu
trúc “vidu1.html” nhé:
Đây là vidu1.html
Chuỗi cần lấy tiếp theo
Các bạn thấy gì trong ví dụ này? Có phải chúng ta có 2 thẻ “ ” ngăn cách mỗi chuỗi đúng không nào. Và nếu trong trường hợp này, tôi muốn lấy ra thẻ “ ” có “id ” là “chuoi-can-lay ”. Thì tôi sẽ chỉnh sửa lại một tí đoạn code trong “ ” của chúng ta như sau:
$[document].ready[function[] {
$['#load-du-lieu'].click[function[e] {
e.preventDefault[];
$['#noidung'].load['vidu1.html #chuoi-can-lay'];
}];
}];Và sau đó các bạn chạy và load lại dữ liệu thì chúng ta
sẽ được như sau:
Thật bất ngờ đúng không nào? Như vậy, để có thể bóc tách dữ liệu từ file mà chúng ta load lên, và ở đây chính là file “vidu1.html” thì chúng ta cần đặt “id ” cho
thẻ bao lấy dữ liệu mà chúng ta cần tách lọc. Sau đó thêm vào ĐẰNG SAU đường dẫn như cách chúng ta dùng jQuery để trỏ đến một thẻ trong HTML nào đó vậy.
Vậy là chúng ta đã hoàn tất tìm hiểu xong được phương thức “load[] ” trong jQuery Ajax rồi đấy.
Phương thức “get[]” và “post[]”
Ở 2 phương thức này thì trong đó phương thức “get[] ” giống “load[] ” về mặt kĩ thuật đó chính là dùng “method”
là “GET” trong “ ”. Tương tự “post[] ” sẽ tượng trưng cho “method” là “POST” của “ ”. Cả 2 phương thức này đều cách viết tắt của phương thức “ajax[]” mà chúng ta sẽ làm quen ở phần tới.
Phương thức “get[]”
Vì có sự tương đồng giữa “get[] ” và “load[] ” nên chắc hẳn cách dùng cũng không
có phần khác lạ so với các ví dụ ở trên, nhưng cần lưu ý một số cú pháp để tránh nhầm lẫn với “load[] ”:
$[document].ready[function[] {
$['#load-du-lieu'].click[function[e] {
e.preventDefault[];
$.get['vidu1.html', function[ketqua] {
$['#noidung'].html[ketqua];
$['#noidung'].html[$['#chuoi-can-lay'].html[]];
}];
}];
}];Kết quả khi chạy ví dụ trên:
- Đoạn code này cho
bạn thấy rằng để sử dụng được phương thức “get[] ”, các bạn cần dùng đến biến “$ ” [hay “jQuery ”] sau đó sử dụng thẳng phương thức “get[] ” chứ không giống như “$[‘#id-can-lay’].load[] ” như ví dụ trước ta đã xem ở phương thức “load[] ”.
- Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “load[] ”.
- Kết quả trả
về sẽ thông qua đối số thứ 2 của phương thức “get[] ” là một Anonymous Function có đối số mặc định trả về là “ketqua ” như chúng ta đã thấy. Các bạn có thể dùng “console.log[ketqua] ” và bật F12 của trình duyệt trên Chrome/Mozilla/Opera để xem kết quả trả về khi click vào.
- Và để tách lọc dữ liệu từ
“ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ ” của chúng ta. Sau đó chúng ta dùng tiếp “$[‘#id-can-lay’].html[] ” để tách lọc dữ liệu như ở phương thức “load[] ” mà chúng ta đã xài trước đó. Các bạn có thể bỏ đi dòng “$['#noidung'].html[$['#chuoi-can-lay'].html[]] ” để thấy sự tương đồng giữa “load[] ” và
“get[] ” chỉ khác nhau về cách dùng.
Ngoài ra “get[] ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu, tuy nhiên cái này thuộc về sự hiểu biết của các bạn trong kĩ thuật lập trình Web nên tôi không nói nhiều ở đây, không thì sẽ loãng bài viết.
Phương Thức “post[]”
Trong phương thức này, cần có ít nhất một ngôn ngữ động ở phía hệ thống để nhận lấy dữ liệu từ phương thức “post[] ” truyền qua. Vì
thế, ở đây tôi sẽ dùng PHP để demo cho các bạn.
Cách dùng của phương thức “post[] ” sẽ giống với “get[] ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.
$[document].ready[function[] {
$['#load-du-lieu'].click[function[e] {
e.preventDefault[];
$.post['vidu2.php', {
emNguoiYeu: "Em Yêu Anh",
anhNguoiYeu: "Anh không phải người dễ dãi nhé"
},function[ketqua] {
$['#noidung'].html[ketqua];
}];
}];
}];Nội dung của file "vidu2.php":