Đã bao lần bạn gặp trường hợp nhập sai dữ liệu, do trang tải lại mà xóa mất hoàn toàn các ký tự đã nhập vào các ô. Để khắc phục điều này, có một cách tiếp cận khá phổ biến để xây dựng giao diện người dùng và tên của nó là ajax. Nó xuất hiện trong nhiều dự án và được sử dụng theo nhiều cách.
Gửi biểu mẫu ajax: kết nối các thư viện
Bao gồm thư viện jquery trong index.php.
Có một cách khác để đưa jquery vào tài liệu. Bạn cần tải xuống thư viện từ trang web chính thức của jquery, đặt nó vào thư mục bên phải và dán liên kết đến nó như sau:
Kết nối và thiết lập tài liệu
1. Tạo tài liệu.php trong thư mục với trang web với bất kỳ tên nào thuận tiện cho bạn - thao tác này sẽ gửi biểu mẫu ajax php. Trong đó bạn có thể viết ở định dạng nào mà văn bản với thông báo sẽ được hiển thị. Ví dụ: form1.php.
2. Trong thư mục tệp javascript của bạn, hãy tạo tệp.js vớibất kỳ tên thuận tiện. Ví dụ: form.js.
3. Kết nối thư mục này với tài liệu của bạn.
4. Tạo biểu mẫu với các tham số sau:
Trong đó, đừng quên tạo các trường để nhập dữ liệu của bạn.
5. Đi tới tệp form1.php trong thư mục có trang web, trong đó viết:
Bây giờ, khi gửi biểu mẫu, trình duyệt sẽ hiển thị thông tin về dữ liệu.
Trong cùng một tệp, bạn có thể viết chính xác nội dung sẽ được hiển thị hoặc cách thức. Bạn cũng có thể viết các chu trình hoặc thuật toán tại đây.
Gửi mẫu jquery ajax
1. Trong tệp form.js đã tạo, bạn cần viết mã chịu trách nhiệm làm cho tệp hoạt động sau khi trang web được tải đầy đủ.
$ (tài liệu).ready (function () {// Mã tiếp theo của chúng tôi sẽ chạy ở đây});
2. Sau đó, bạn cần phải tùy chỉnh nút gửi. Làm tất cả trong cùng một tệp.
$ ("form"). Submit (function (event) {event.preventDefault (); // đoạn mã sau sẽ được viết ở đây});
Phần đầu tiên của mã chịu trách nhiệm chọn phần tử trên trang và phần thứ hai chịu trách nhiệm ngăn hành động mặc định.
3. Sau đó, chẳng hạn, hãy gửi biểu mẫu ajax khi thành công.
$. Ajax ({type: $ (this).attr ('method'), url: $ (this).attr ('action'), data: new FormData (this), contentType: false, cache: false, processData: false, Success: function (result) {alert (result);}});
Sau đây là mô tả chi tiết của từng cài đặt.
- loại -đây là loại yêu cầu được gửi trong biểu mẫu; vì nó có phí ĐĂNG, nên loại yêu cầu sẽ phù hợp;
- this - lựa chọn phần tử bên trong cấu trúc;
- attr - viết tắt của hấp dẫn (hấp dẫn), tức là một thông số nào đó của mục tiêu đã chọn (hình thức) bị thu hút;
- url - tham số chịu trách nhiệm về nơi yêu cầu sẽ được gửi; trong trường hợp này, những gì được viết trong các tham số biểu mẫu (form1.php);
- data - chỉ định dữ liệu biểu mẫu;
- contentType - chịu trách nhiệm gửi tiêu đề đến máy chủ; trong trường hợp này nó không cần thiết;
- cache - chịu trách nhiệm lưu bộ nhớ cache của người dùng;
- processData - chịu trách nhiệm chuyển đổi dữ liệu thành một chuỗi;
- thành công - hiển thị kết quả của một lần gửi dữ liệu thành công; do đó, nếu việc gửi dữ liệu thành công, thì các hành động của hàm sẽ được thực thi.
4. Xong, bây giờ khi gửi biểu mẫu ajax, bạn sẽ nhận được dữ liệu mà không cần refresh trang.
Kết quả có thể được thay đổi bằng cách sử dụng tệp form1.php, nơi bạn có thể chỉ định chính xác kết quả sẽ được hiển thị. Ví dụ:
Bạn có thể thử nghiệm và tạo kiểm tra tính chính xác của việc nhập một số dữ liệu nhất định: nếu dữ liệu không chính xác, thì thông báo mong muốn sẽ được hiển thị, nếu không nó sẽ chuyển hướng đến trang chính xác. Nhiều thứ khác cũng có thể thực hiện được, bất cứ điều gì trái tim bạn mong muốn.
Cũng có việc gửi dữ liệu đến máy chủ một cách không đồng bộ. Đây là khi người dùng nhập văn bản, và nó ngay lập tức được tô màu đỏ, cho biết dữ liệu đã nhập không chính xác. Về nócó rất nhiều sách hướng dẫn trên Internet, nơi mọi thứ đều được giải thích rõ ràng và hiển thị với các ví dụ.
Kết
Không còn nghi ngờ gì nữa, ajax là một công cụ hữu ích trong việc xây dựng trang web. Để tạo ra các trang và giao diện chất lượng cao, nó chỉ đơn giản là cần thiết. Cần lưu ý rằng điều rất quan trọng là phải biết jQuery để hiểu đầy đủ hình ảnh và những gì được viết trong mã, bởi vì một bản sao-dán đơn giản không phải lúc nào cũng giúp và dạy bạn hiểu mã. Điều đáng nhớ là các phiên bản ngôn ngữ được cập nhật và một số tính năng có thể biến mất. Do đó, không phải tất cả các giải pháp đều có thể phù hợp, thường thì mã được viết đơn giản là không hoạt động hoặc không tạo ra kết quả mà bạn muốn thấy trên màn hình của mình.
