Mục đích của bài viết này là gửi giá trị của nút tới back-end PHP bằng AJAX trong tài liệu HTML
Tiếp cận. Tạo một nút trong tài liệu HTML và gán Id cho nó. Trong tệp JavaScript, hãy thêm trình xử lý sự kiện vào nút i. bấm vào. Sau đó, yêu cầu được gửi tới tệp PHP bằng jQuery Ajax
Trong bài viết này, chúng ta sẽ xem cách gửi yêu cầu bài viết AJAX PHP với một ví dụ. Nói chung, một yêu cầu POST được sử dụng để gửi dữ liệu đến tệp PHP, sau đó chúng ta có thể sử dụng dữ liệu đó, xử lý nó như kiểm tra xác thực, lưu dữ liệu, gửi thư, v.v. và sau đó PHP sẽ gửi phản hồi với thông báo, dữ liệu, phản hồi
Tại sao chúng tôi sử dụng AJAX?
AJAX được sử dụng để thực hiện các yêu cầu HTTP khác nhau như POST, GET, PUT, v.v. AJAX được sử dụng để cập nhật một phần của trang web mà không cần tải lại trang. Nhìn chung, nó sẽ cải thiện trải nghiệm người dùng
Ví dụ: Giả sử chúng ta đang sử dụng jQuery AJAX Post request cho biểu mẫu đăng nhập, vì vậy trong phần này, chúng ta sẽ gửi tên người dùng và mật khẩu đến tệp PHP. Trong tệp đó, chúng tôi sẽ kiểm tra tên người dùng và mật khẩu vào cơ sở dữ liệu và cho phép người dùng đăng nhập hoặc hiển thị cho họ thông báo lỗi trong biểu mẫu đăng nhập
Chúng ta có thể sử dụng AJAX ở đâu?
Chúng ta có thể sử dụng AJAX ở mọi nơi trên website. Hãy xem những nơi rất hữu ích mà AJAX được sử dụng
- Biểu mẫu đăng nhập để xác thực người dùng và chuyển hướng người dùng nếu thành công hoặc hiển thị thông báo trên biểu mẫu
- Biểu mẫu đăng ký để chèn dữ liệu vào cơ sở dữ liệu, gửi email và hiển thị xác thực phía máy chủ, v.v.
- Gửi email của biểu mẫu liên hệ với chúng tôi và hiển thị thông báo thành công hoặc lỗi trên biểu mẫu
- AJAX được sử dụng trong các bảng dữ liệu để chỉ tìm nạp dữ liệu cần thiết để khắc phục tải trên máy chủ
- Đối với việc phân trang bài viết, bảng, hiệu ứng nút tải thêm, v.v.
- Tự động hoàn thành tìm kiếm giống như bạn nhập Au và nó sẽ đưa ra các danh sách có từ Au
- Để tạo các bộ lọc như bộ lọc giá, bộ lọc màu, bộ lọc danh mục, v.v.
Sử dụng jQuery $. ajax[] Phương thức gửi yêu cầu HTTP
Những người dùng khác nhau làm theo những cách khác nhau để gửi dữ liệu bằng AJAX. Hãy xem làm thế nào để làm điều đó
1. AJAX. Gửi dữ liệu bằng tham số đối tượng
Để gửi tham số, bạn cần tạo một đối tượng JavaScript. Vì vậy, để làm điều đó, bạn cần nhận các giá trị bằng cách sử dụng. val[] và tạo một đối tượng bằng cách sử dụng nó như bên dưới
Nhưng điều gì sẽ xảy ra nếu bạn có một số lượng lớn các trường trong biểu mẫu của mình trong trường hợp đó, bạn cần gửi toàn bộ dữ liệu biểu mẫu từng cái một nhưng đó không phải là một ý tưởng hay phải không?
let firstName = $['#firstname'].val[],
lastName = $['#lastname'].val[],
message = $['#message'].val[];
$.ajax[{
method: "POST",
url: 'file.php',
data: { firstname: firstName, lastname: lastName, message: message },
success: function[response]{
console.log[response];
},
error: function[xhr, status, error]{
console.error[xhr];
}
}];
2. AJAX. Gửi toàn bộ dữ liệu biểu mẫu bằng các phương thức serialize[] & serializeArray[]
serialize[] tạo dữ liệu ở định dạng chuỗi truy vấn, do đó việc gửi tệp có chức năng này sẽ không hoạt động
phương thức tạo dữ liệu trong các đối tượng mảng JavaScript
Giả sử, bạn có một biểu mẫu và bạn muốn gửi toàn bộ dữ liệu biểu mẫu bằng AJAX thì bạn có thể thực hiện một số thao tác như bên dưới
let formData = $['#myForm'].serialize[];
/* Or use serializeArray[] function same as serialize[]
let formData = $['#myForm'].serializeArray[]; */
$.ajax[{
method: "POST",
url: 'file.php',
data: formData,
success: function[response]{
console.log[response];
},
error: function[xhr, status, error]{
console.error[xhr];
}
}];
3. AJAX. Gửi toàn bộ dữ liệu biểu mẫu bằng các phương thức FormData[]
FormData[] là hàm tạo tạo đối tượng FormData mới như bên dưới
let myForm = document.getElementById['myForm'];
let formData = new FormData[myForm];
$.ajax[{
method: "POST",
url: 'file.php',
data: formData,
success: function[response]{
console.log[response];
},
error: function[xhr, status, error]{
console.error[xhr];
}
}];
Nếu bạn muốn nối thêm cặp khóa-giá trị trong đối tượng FormData[] thì bạn có thể sử dụng obj. hàm append[‘key’, ‘value’] như bên dưới
formData.append['action', 'insert'];
4. Đăng ký người dùng sử dụng AJAX PHP Yêu cầu bài đăng
Trong ví dụ này, chúng tôi sẽ gửi một biểu mẫu đăng ký đơn giản bằng cách sử dụng AJAX PHP
mục lục. php
AJAX PHP Post Request
body {
color: #fff;
background: #3598dc;
font-family: "Roboto", sans-serif;
}
.form-control {
height: 41px;
background: #f2f2f2;
box-shadow: none !important;
border: none;
}
.form-control:focus {
background: #e2e2e2;
}
.form-control,
.btn {
border-radius: 3px;
}
.signup-form {
width: 400px;
margin: 30px auto;
}
.signup-form form {
color: #999;
border-radius: 3px;
margin-bottom: 15px;
background: #fff;
box-shadow: 0px 2px 2px rgba[0, 0, 0, 0.3];
padding: 30px;
}
.signup-form h2 {
color: #333;
font-weight: bold;
margin-top: 0;
}
.signup-form hr {
margin: 0 -30px 20px;
}
.signup-form .form-group {
margin-bottom: 20px;
}
.signup-form input[type="checkbox"] {
margin-top: 3px;
}
.signup-form .row div:first-child {
padding-right: 10px;
}
.signup-form .row div:last-child {
padding-left: 10px;
}
.signup-form .btn {
font-size: 16px;
font-weight: bold;
background: #3598dc;
border: none;
min-width: 140px;
}
.signup-form .btn:hover,
.signup-form .btn:focus {
background: #2389cd !important;
outline: none;
}
.signup-form a {
color: #fff;
text-decoration: underline;
}
.signup-form a:hover {
text-decoration: none;
}
.signup-form form a {
color: #3598dc;
text-decoration: none;
}
.signup-form form a:hover {
text-decoration: underline;
}
.signup-form .hint-text {
padding-bottom: 15px;
text-align: center;
}
#responseContainer {
display: none;
}
Sign Up
Please fill in this form to create an account!
I accept the Terms of Use & Privacy Policy
Sign Up
Already have an account? Login here
$[document].ready[ function[] {
/*@ Registration start */
$['#btnSubmit'].click[ function[e] {
e.preventDefault[];
let formData = $['#registrationForm'].serialize[];
$.ajax[{
method: 'POST',
url: 'processRegistration.php',
data: formData,
success: function [response] {
let res = JSON.parse[response];
$['#responseContainer'].removeClass['alert-danger'];
$['#responseContainer'].addClass['alert-success'];
$['#responseContainer'].html[res.msg];
$['#responseContainer'].show[];
},
error: function [response] {
let res = JSON.parse[response.responseText];
$['#responseContainer'].addClass['alert-danger'];
$['#responseContainer'].removeClass['alert-success'];
$['#responseContainer'].html[res.msg];
$['#responseContainer'].show[];
},
}];
}];
}];