AJAX là một kỹ thuật hay để làm một việc gì đó hoặc xử lý mã PHP phía máy chủ mà không cần làm mới toàn bộ trang. AJAX không phải là ngôn ngữ lập trình mới. Đây là một kỹ thuật sử dụng JavaScript hiện có mà không cần phải làm mới toàn bộ trang
jQuery là một thư viện JavaScript chứa rất nhiều sẵn sàng để sử dụng. Làm việc với AJAX dễ dàng hơn khi sử dụng jQuery vì đã có sẵn phương thức AJAX trong jQuery
Nút Phát/Tạm dừng cho Video HTML5 Sử dụng JavaScript
Trong hướng dẫn này, tôi sẽ cho bạn biết cách chuyển dữ liệu biểu mẫu vào biến JavaScript và sau đó cách xử lý dữ liệu bằng phương thức AJAX của jQuery. Chúng tôi sẽ gọi jQuery cho AJAX
Lúc đầu, chúng ta cần tạo một biểu mẫu HTML bằng một nút. Chúng tôi cũng sẽ tạo một phần tử div với div id “kết quả”. Trong khu vực này, tệp PHP sẽ tải mà chúng tôi muốn gọi thông qua jQuery AJAX. Dưới đây là mã HTML
Và mã JavaScript được đưa ra dưới đây
$[document].ready[function[]{ $["#sub"].click[function[] { var city_name=$["#city"].val[]; var country_name=$["#country"].val[]; $.ajax[{ url:'ajax.php', data:{city:city_name, country:country_name}, type:'POST', success:function[data] { $["#result"].html[data]; } }]; }]; }];
Tất cả các mã này sẽ được chuyển đến chỉ mục. tập tin php. Chúng tôi sẽ lấy giá trị biểu mẫu bằng cách sử dụng id đầu vào biểu mẫu duy nhất. Chúng tôi đang lấy dữ liệu bên trong biến JavaScript và sau đó, chúng tôi sẽ gửi giá trị bằng phương thức đăng tới ajax. php và tải nó bên trong div id “kết quả”. Dữ liệu được xử lý bằng file PHP ajax. php
Mã hoàn chỉnh cho chỉ mục. tập tin php được đưa ra dưới đây
$[document].ready[function[]{ $["#sub"].click[function[] { var city_name=$["#city"].val[]; var country_name=$["#country"].val[]; $.ajax[{ url:'ajax.php', data:{city:city_name, country:country_name}, type:'POST', success:function[data] { $["#result"].html[data]; } }]; }]; }];
Và ajax. tệp php sẽ chứa mã được cung cấp bên dưới
Trong đoạn mã PHP trên, chúng tôi đang lấy giá trị và hiển thị nó trên màn hình. Tệp này đang gọi qua AJAX
Bây giờ hãy chạy nó trên máy chủ của bạn và bạn sẽ có thể thấy sau khi nhập các trường mà nó hiển thị văn bản trường cho bạn. Nếu bạn rời khỏi một trong các trường, thì nó sẽ hiển thị cho bạn văn bản "Vui lòng nhập tất cả các giá trị"
Vô hiệu hóa trường nhập HTML và làm cho nó không thể nhấp được
Cách tạo văn bản định dạng JSON trong PHP
trong ajax. php, chúng tôi có thể làm bất cứ điều gì với dữ liệu biểu mẫu và thậm chí chúng tôi có thể chèn dữ liệu vào bên trong cơ sở dữ liệu và không cần phải làm mới toàn bộ trang để làm điều đó. Đây là tính năng chính của việc sử dụng AJAX. Nó tiết kiệm băng thông cho trang web của bạn và cũng tiêu tốn ít dữ liệu hơn cho phía máy khách
❮ Các phương thức AJAX của jQuery
Thí dụ
Gửi yêu cầu HTTP GET tới một trang và nhận lại kết quả
$["nút"]. click[function[]{
$. get["demo_test. asp", chức năng[dữ liệu, trạng thái]{
alert["Dữ liệu. " + dữ liệu + "\nTrạng thái. " + status];
}];
}];
Định nghĩa và cách sử dụng
$. phương thức get[] tải dữ liệu từ máy chủ bằng yêu cầu HTTP GET
ví dụ
Yêu cầu "kiểm tra. php", nhưng bỏ qua kết quả trả về
Yêu cầu "kiểm tra. php" và gửi một số dữ liệu bổ sung cùng với yêu cầu [bỏ qua kết quả trả về]
$. nhận ["kiểm tra. php", { tên. "Donald", thị trấn. "Thị trấn vịt" }];
Yêu cầu "kiểm tra. php" và chuyển mảng dữ liệu tới máy chủ [bỏ qua kết quả trả về]
$. nhận ["kiểm tra. php", { 'màu[]'. ["Đỏ lục lam"] }];
Yêu cầu "kiểm tra. php" và thông báo kết quả của yêu cầu
$. nhận ["kiểm tra. php", function[data]{
alert["Dữ liệu. " + dữ liệu];
}];
cú pháp
$. get[URL,dữ liệu,hàm[dữ liệu,trạng thái,xhr],kiểu dữ liệu]
Tham sốDescriptionURLBắt buộc. Chỉ định URL bạn muốn yêu cầu dữ liệuTùy chọn. Chỉ định dữ liệu để gửi đến máy chủ cùng với chức năng yêu cầu [dữ liệu, trạng thái, xhr] Tùy chọn. Chỉ định một chức năng sẽ chạy nếu yêu cầu thành công
Thông số bổ sung.
- dữ liệu - chứa dữ liệu kết quả từ yêu cầu
- status - chứa trạng thái của yêu cầu ["success", "notmodified", "error", "timeout" hoặc "parsererror"]
- xhr - chứa đối tượng XMLHttpRequest
Theo mặc định, jQuery thực hiện đoán tự động.
Các loại có thể.
- "xml" - Một tài liệu XML
- "html" - HTML dưới dạng văn bản thuần túy
- "văn bản" - Một chuỗi văn bản thuần túy
- "script" - Chạy phản hồi dưới dạng JavaScript và trả về dưới dạng văn bản thuần túy
- "json" - Chạy phản hồi dưới dạng JSON và trả về một đối tượng JavaScript
- "jsonp" - Tải trong một khối JSON bằng JSONP. Sẽ thêm một "?callback=?"
❮ Các phương thức AJAX của jQuery