Phương thức .get() và .post() trong JQuery Ajax

Một ưu điểm tuyệt vời mà Ajax đó là khi làm việc trang web không phải load lại trang. Điều này giảm thiểu đáng kể thời gian chờ đợi phản hồi cũng như dung lượng tải xuống. Ajax cung cấp hai phương thức Get() và Post() cho phép gửi và truy xuất dữ liệu không đồng bộ từ máy chủ web nhanh chóng.

Hãy cùng với mình đi tìm hiểu rõ hơn về .get() và .post() trong JQuery Ajax qua bài viết dưới đây.

Về cơ bản thì cả .get() và .post() không có sự khác biệt là mấy. Điểm khác nhau đó là .post() dùng để truy xuất thông tin có tính bảo mật cao. Chẳng hạn như thông tin của người dùng như thẻ ngân hàng, mật khẩu…

Phương thức .get()

$.get(URL, data, success);

Giải thích thông số:

Tham số URL bắt buộc chỉ định URL mà yêu cầu được gửi đến.
Tham số data tùy chọn chỉ định một tập hợp chuỗi truy vấn (tức là các cặp khóa / giá trị) được gửi đến máy chủ web cùng với yêu cầu.
Tham số success về cơ bản là một hàm gọi lại được thực thi nếu yêu cầu thành công. Nó thường được sử dụng để lấy dữ liệu trả về.

Bây giờ hãy thực hiện 1 ví dụ sau:

Tạo ra tập tin là getinfo.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ví dụ về GET trong Ajax JQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("getdate.php", function(data){
            $("#demo").html(data);
        });
    });
});
</script>
</head>
<body>
    <div id="demo">
        <h3>Kết quả sẽ được thay thế bằng ngày và giờ từ máy chủ</h3>
    </div>
    <button type="button">Xác nhận</button>
</body>
</html>

Và một tập tin nữa là getdate.php với nội dung

<?php
echo "Hôm nay là " . date("Y-m-d") . "<br>";
echo "Hôm nay là " . date("l");
?>

Sau khi ấn nút thông tin từ getdate.php sẽ được đưa vào getinfo.php mà không phải load lại trang này.

Phương thức .post()

$.post( url, [data], [callback], [type] )

Giải thích thông số:

url – Một chuỗi chứa URL mà yêu cầu được gửi đến
data – Tham số tùy chọn này đại diện cho các cặp khóa / giá trị sẽ được gửi đến máy chủ.
callback – Tham số tùy chọn này đại diện cho một hàm được thực thi bất cứ khi nào dữ liệu được tải thành công.
type – Tham số tùy chọn này đại diện cho một loại dữ liệu được trả về cho hàm gọi lại: “xml”, “html”, “script”, “json”, “jsonp” hoặc “text”.

Cũng với ví dụ ở trên bạn sẽ thay thế bằng .post(). Sự khác nhau đó là khi sử dụng với .post thường dùng cho các nhiệm vụ có tính bảo mật cao. Còn .get() thì ngược lại.

Với ưu điểm sử dụng ajax để không load lại trang thì dữ liệu sẽ không bị thay đổi khi thêm hay update. Bạn thấy Ajax jQuery có tuyệt vời không nào?