Gửi biểu mẫu mà không cần tải lại trang PHP

Trong hướng dẫn này, tôi sẽ giải thích cách gửi biểu mẫu liên hệ mà không cần làm mới trang bằng AJAX, jQuery và PHP. Tất cả chúng ta đều thấy rằng khi gửi bất kỳ biểu mẫu web hoặc biểu mẫu liên hệ nào, phải mất vài giây để gửi mà không làm mới trang web

AJAX có khả năng gửi biểu mẫu mà không cần làm mới trang. Chúng tôi cũng sẽ sử dụng AJAX tại đây cùng với jQuery và PHP. Mặc dù bạn có thể làm bất cứ điều gì với việc gửi biểu mẫu, nhưng ở đây chúng tôi sẽ gửi một email đơn giản đến quản trị viên trang web

Các bước để tạo Gửi biểu mẫu mà không cần làm mới trang bằng Ajax, jQuery và PHP

Để tạo biểu mẫu liên hệ thân thiện với người dùng, chúng tôi sẽ cần thực hiện theo các bước bên dưới

1. Tạo một trang biểu mẫu HTML
2. Bao gồm Thư viện Bootstrap
3. Bao gồm thư viện jQuery
4. Xác thực biểu mẫu jQuery và phương thức AJAX
5. Tạo một trang hành động AJAX

1. Tạo một trang biểu mẫu HTML

Đầu tiên, chúng ta sẽ tạo một biểu mẫu liên hệ đơn giản để nhận thông tin từ người dùng. Tạo một trang có tên index. php   và dán mã bên dưới vào đó. Chúng tôi đang nhận được thông tin sau.

Tên, Email và Tin nhắn

Name:



Email Address:



Message:



Submit

Sau biểu mẫu liên hệ đơn giản, chúng tôi cũng đã tạo một div trống có lớp  message_box , chúng tôi sẽ sử dụng div này để hiển thị tất cả lỗi và thành công .

2. Bao gồm Thư viện Bootstrap

Để mang lại phong cách đơn giản và nhanh chóng, chúng tôi đang sử dụng thư viện Bootstrap ở đây, vì vậy hãy đưa thư viện Bootstrap vào phần đầu của trang web của bạn

3. Bao gồm thư viện jQuery

Vì chúng ta sẽ sử dụng jQuery và AJAX nên chúng ta cần bao gồm Thư viện jQuery trước khi đóng thẻ   .

Bạn có thể tải xuống cả hai tệp thư viện từ nút tải xuống có sẵn ở đầu và cuối hướng dẫn này

4. Xác thực biểu mẫu jQuery và phương thức AJAX

Bây giờ chúng tôi cũng cần xác thực dữ liệu biểu mẫu web của mình, vì vậy chúng tôi sẽ đảm bảo rằng tất cả các trường nhập đã được điền và địa chỉ email đã nhập là hợp lệ. Sau đó, chúng tôi cũng sẽ sử dụng phương pháp AJAX để gửi biểu mẫu mà không cần làm mới trang

$[document].ready[function[] {
   var delay = 2000;
   $['.btn-default'].click[function[e]{
   e.preventDefault[];
   var name = $['#name'].val[];
   if[name == '']{
   $['.message_box'].html[
   'Enter Your Name!'
   ];
   $['#name'].focus[];
   return false;
   }
		
   var email = $['#email'].val[];
   if[email == '']{
   $['.message_box'].html[
   'Enter Email Address!'
   ];
   $['#email'].focus[];
   return false;
   }
   if[ $["#email"].val[]!='' ]{
   if[ !isValidEmailAddress[ $["#email"].val[] ] ]{
   $['.message_box'].html[
   'Provided email address is incorrect!'
   ];
   $['#email'].focus[];
   return false;
   }
   }
			
   var message = $['#message'].val[];
   if[message == '']{
   $['.message_box'].html[
   'Enter Your Message Here!'
   ];
   $['#message'].focus[];
      return false;
   }	
					
   $.ajax
   [{
   type: "POST",
   url: "ajax.php",
   data: "name="+name+"&email="+email+"&message="+message,
   beforeSend: function[] {
   $['.message_box'].html[
   ''
   ];
   },		 
   success: function[data]
   {
   setTimeout[function[] {
   $['.message_box'].html[data];
   }, delay];
   }
   }];
   }];
			
}];

Chức năng xác minh email

//Email Validation Function	
function isValidEmailAddress[emailAddress] {
    var pattern = /^[[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+[\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+]*|"[[[[ \t]*\r\n]?[ \t]+]?[[\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]]]*[[[ \t]*\r\n]?[ \t]+]?"]@[[[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]]\.]+[[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]]\.?$/i;
    return pattern.test[emailAddress];
};

Như bạn có thể thấy trong tập lệnh trên, chúng tôi đang thực hiện xác thực đơn giản, đó là tập lệnh rất đơn giản chỉ kiểm tra xem tên có trống không, sau đó hướng con trỏ vào trường tên và cũng hiển thị lỗi trong .message_box  div, chúng tôi cũng đang làm như vậy cho các trường email và tin nhắn. Ngoài ra, chúng tôi đang kiểm tra xem email đó có hợp lệ hay không bằng cách sử dụng chức năng  isValidEmailAddress[]   ở trên.

Khi tất cả các trường được điền và người dùng nhấn nút gửi, AJAX sẽ gửi tất cả dữ liệu trường đầu vào tới ajax. php  trang này sẽ chỉ gửi email đến quản trị viên web.

5. Tạo một trang hành động AJAX

Tạo trang có tên ajax. php , thao tác này sẽ gửi email đến quản trị viên web bằng chức năng thư PHP đơn giản. Mặc dù cách tốt hơn để gửi email bằng PHP là sử dụng PHPMailer nhưng tôi đang sử dụng chức năng thư ở đây để giữ cho hướng dẫn này đơn giản, tôi sẽ đề xuất tất cả các bạn sử dụng PHPMailer. Sao chép và dán đoạn mã bên dưới vào  ajax. php