Ở bài viết trước chúng ta đã tìm hiểu Ajax là gì. Thì ở bài viết này chúng ta sẽ cùng nhau tìm hiểu và làm một ví dụ cơ bản về phương thức POST trong Ajax.
Phương thức POST trong Ajax sẽ bao gồm 2 cách viết $.ajax và $.post:
$.ajax()hoặc
$.post()
1. Phương thức POST trong jquery ajax với $.ajax
$.ajax({name:value, name:value, ... })Các cặp name/value có thể có trong bảng dưới đây:
- async: Giá trị Boolean cho biết liệu yêu cầu có được xử lý bất đồng bộ hay không. Mặc định là
true - beforeSend(xhr): Một hàm gọi lại để chạy trước khi yêu cầu được gửi đi
- cache: Giá trị Boolean cho biết liệu trình duyệt có nên lưu vào bộ nhớ cache các trang được yêu cầu hay không. Mặc định là
true - complete(xhr,status): Một hàm được thực thi khi request kết thúc (sau khi hàm gọi lại
successvàerrorđược thực thi). - contentType: Loại nội dung được sử dụng khi gửi dữ liệu đến máy chủ. Mặc định là: “application/x-www-form-urlencoded”
- context: Một object được dùng làm ngữ cảnh (
this) của tất cả các hàm gọi lại liên quan đến Ajax. - data: Chỉ định dữ liệu được gửi đến máy chủ.
- dataFilter(data,type): Một hàm được sử dụng để xử lý dữ liệu phản hồi thô của XMLHttpRequest.
- dataType: Kiểu của dữ liệu mong muốn được trả về từ server.
- error(xhr,status,error): Một hàm sẽ được gọi khi yêu cầu không thành công.
- global: Dùng để thiết lập xem có gọi các hàm xử lý sự kiện Ajax toàn cục cho request này hay không.
- …
Bạn có thể xem danh sách đầy đủ ở đây: https://www.w3schools.com/jquery/ajax_ajax.asp
Ví dụ về $.ajax
Để các bạn có thể hiểu rõ hơn thì mình sẽ làm một ví dụ đơn giản nhé.
Trong ví dụ này mình sẽ có 2 ô input để nhập 2 số, và khi người dùng nhập vào 2 ô input này và nhấn submit thì mình muốn dùng ajax để trả về kết quả mà không cần load lại trang.
Tạo form nhập liệu
File index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.application {
display: flex;
justify-content: space-around;
align-items: center;
width: 1000px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.application input {
padding: 10px 20px;
border-radius: 5px;
border: 1px solid #a79b9b;
}
</style>
<script>
$(document).ready(function () {
// Bắt sự kiện khi người dùng click vào button
$('#calculate').click(function (e) {
// Ngăn không cho load lại trang
e.preventDefault();
//Lấy giá trị của 2 ô input
let so1 = $('input[name="so1"]').val(),
so2 = $('input[name="so2"]').val();
// Gửi request đến file calculate.php để xử lý với tham số là bien1 và bien2
$.ajax({
url: 'calculate.php',
type: 'POST',
data: {
bien1: so1,
bien2: so2
},
// Nếu thành công thì hiển thị kết quả ra trình duyệt
success: function (response) {
$('input[name="result"]').val(response);
},
error: function (error) {
console.log(error);
}
});
});
});
</script>
</head>
<body>
<form class="application">
<input type="number" name="so1" required/>
<span>+</span>
<input type="number" name="so2" required/>
<input type="submit" id="calculate" value="Tính tổng"/>
<input type="number" name="result" readonly>
</form>
</body>
</html>
Ở file index.php phía trên, các bạn nhớ thêm jquery vào nhé.
Viết Ajax và PHP
Bước tiếp theo chúng ta sẽ viết Ajax để gửi request lên máy chủ PHP để xử lý và nhận kết quả trả về.
<script>
$(document).ready(function () {
// Bắt sự kiện khi người dùng click vào button
$('#calculate').click(function (e) {
// Ngăn không cho load lại trang
e.preventDefault();
//Lấy giá trị của 2 ô input
let so1 = $('input[name="so1"]').val(),
so2 = $('input[name="so2"]').val();
// Gửi request đến file calculate.php để xử lý với tham số là bien1 và bien2
$.ajax({
url: 'calculate.php',
type: 'POST',
data: {
bien1: so1,
bien2: so2
},
// Nếu thành công thì hiển thị kết quả ra trình duyệt
success: function (response) {
$('input[name="result"]').val(response);
},
error: function (error) {
console.log(error);
}
});
});
});
</script>Ở file trên mình đã gửi một request đến file calculate.php với tham số là bien1 và bien2.
Tiếp theo chúng ta sẽ xử lý PHP nhé. Tạo file calculate.php
<?php
$so1 = $_POST['bien1'];
$so2 = $_POST['bien2'];
echo $so1 + $so2;Vì ở Ajax chúng ta đã gửi request với phương thức POST nên chúng ta sẽ lấy dữ liệu bằng biến cục bộ $_POST. Đơn giản phải không nào.
2. Phương thức POST trong jquery ajax với $.post
$.post({name:value, name:value, ... })$.post() cũng giống với $.ajax(). Trong ví dụ trên chúng ta chỉ cần thay thế đoạn ajax như sau:
<script>
$(document).ready(function () {
// Bắt sự kiện khi người dùng click vào button
$('#calculate').click(function (e) {
// Ngăn không cho load lại trang
e.preventDefault();
//Lấy giá trị của 2 ô input
let so1 = $('input[name="so1"]').val(),
so2 = $('input[name="so2"]').val();
// Gửi request đến file calculate.php để xử lý với tham số là bien1 và bien2
$.post({
url: 'calculate.php',
data: {
bien1: so1,
bien2: so2
},
// Nếu thành công thì hiển thị kết quả ra trình duyệt
success: function (response) {
$('input[name="result"]').val(response);
},
error: function (error) {
console.log(error);
}
});
});
});
</script>Source code: https://github.com/vimagento/ajax