close

AJAX và jQuery - Xử lý yêu cầu và tương tác dữ liệu

AJAX (Asynchronous JavaScript and XML) là một công nghệ cho phép giao tiếp và trao đổi dữ liệu giữa trình duyệt và máy chủ mà không cần tải lại toàn bộ trang web. jQuery cung cấp một số phương thức và chức năng dễ dàng để thực hiện các yêu cầu AJAX. Dưới đây là một số ví dụ về cách sử dụng AJAX với jQuery:

 

Phương thức $.ajax()

Phương thức $.ajax() là một phương thức linh hoạt cho phép bạn thực hiện các yêu cầu AJAX đến máy chủ. Nó cung cấp nhiều tùy chọn để tùy chỉnh yêu cầu của bạn, chẳng hạn như chỉ định URL, phương thức yêu cầu (GET, POST, v.v.), xử lý callback khi yêu cầu thành công hoặc gặp lỗi, và nhiều tùy chọn khác. Bạn có thể sử dụng phương thức này khi bạn cần kiểm soát chi tiết hơn về yêu cầu AJAX.

$.ajax({
  url: "data.php",
  method: "GET",
  success: function(response) {
    // Xử lý dữ liệu nhận về thành công
  },
  error: function(xhr, status, error) {
    // Xử lý khi có lỗi xảy ra
  }
});

 

Phương thức $.get()

Phương thức $.get() là một phương thức rút gọn để thực hiện yêu cầu GET đến máy chủ. Nó đơn giản hóa quá trình bằng cách tự động đặt phương thức yêu cầu là GET và xử lý callback khi yêu cầu thành công. Bạn có thể sử dụng phương thức này khi bạn chỉ cần lấy dữ liệu từ máy chủ.

$.get("data.php", function(response) {
  // Xử lý dữ liệu nhận về thành công
});

 

Phương thức $.post()

Phương thức $.post() tương tự như $.get(), nhưng nó cụ thể gửi một yêu cầu POST đến máy chủ. Nó cho phép bạn gửi dữ liệu kèm theo yêu cầu, điều này hữu ích khi bạn muốn gửi dữ liệu biểu mẫu hoặc các tham số khác đến máy chủ.

$.post("save.php", { name: "John", age: 30 }, function(response) {
  // Xử lý dữ liệu nhận về thành công
});

 

Phương thức $.getJSON()

Phương thức $.getJSON() được sử dụng để lấy dữ liệu JSON từ máy chủ. Đây là một phương thức rút gọn tự động đặt phương thức yêu cầu là GET và mong đợi máy chủ trả về một phản hồi JSON. Nó đơn giản hóa quá trình lấy và làm việc với dữ liệu JSON.

$.getJSON("data.json", function(data) {
  // Xử lý dữ liệu JSON nhận về thành công
});

 

Phương thức $.ajaxSetup() (Cấu hình AJAX mặc định)

Phương thức $.ajaxSetup() cho phép bạn cấu hình các thiết lập mặc định cho tất cả các yêu cầu AJAX trong tương lai. Ví dụ, bạn có thể đặt các tiêu đề mặc định, chỉ định kiểu dữ liệu hoặc cấu hình tùy chọn xác thực. Phương thức này hữu ích khi bạn muốn thiết lập các tùy chọn chung áp dụng cho nhiều yêu cầu AJAX.

$.ajaxSetup({
  headers: { "Authorization": "Bearer token" }
});

 

Phương thức $.ajaxPrefilter() (Tiền xử lý AJAX):

Phương thức $.ajaxPrefilter() được sử dụng để tiền xử lý các yêu cầu AJAX trước khi chúng được gửi đi. Nó cho phép bạn tiền xử lý các tùy chọn của yêu cầu AJAX và sửa đổi chúng theo nhu cầu. Điều này có thể hữu ích để thêm tiêu đề tùy chỉnh, xử lý dữ liệu hoặc chặn các yêu cầu.

$.ajaxPrefilter(function(options, originalOptions, xhr) {
  // Tiền xử lý trước khi gửi yêu cầu AJAX
});

 

Những phương thức này cung cấp các cách khác nhau để làm việc với các yêu cầu AJAX trong jQuery. Tùy thuộc vào yêu cầu cụ thể của bạn, bạn có thể chọn phương thức phù hợp nhất. jQuery đơn giản hóa quá trình thực hiện các yêu cầu AJAX và xử lý phản hồi, giúp bạn tạo ra ứng dụng web linh hoạt và tương tác.