Làm việc với JSON và jQuery để hiển thị dữ liệu động trên trang web

Để hiển thị dữ liệu động trên trang web, chúng ta có thể sử dụng jQuery để tải dữ liệu từ API bằng Ajax, sau đó sử dụng JSON để đọc và hiển thị dữ liệu đó trên trang web.

Ví dụ, giả sử chúng ta có một API trả về dữ liệu danh sách sản phẩm, chúng ta có thể sử dụng Ajax để tải dữ liệu đó và sử dụng jQuery và JSON để hiển thị danh sách sản phẩm đó trên trang web.

Bước 1: Tải dữ liệu từ API bằng Ajax

$.ajax({
  url: 'https://api.example.com/products',
  method: 'GET',
  success: function(data) {
    // Xử lý dữ liệu trả về
    console.log(data);
  },
  error: function() {
    // Xử lý lỗi
    console.log('Failed to load data');
  }
});

Trong đoạn mã trên, chúng ta sử dụng phương thức $.ajax() của jQuery để gửi yêu cầu GET đến API và nhận dữ liệu trả về thông qua hàm callback success. Nếu xảy ra lỗi, chúng ta xử lý nó trong hàm callback error.

Bước 2: Hiển thị dữ liệu động trên trang web

$.ajax({
  url: 'https://api.example.com/products',
  method: 'GET',
  success: function(data) {
    // Xử lý dữ liệu trả về
    var $list = $('#product-list');
    $list.empty();

    $.each(data, function(index, product) {
      var $item = $('<li>').addClass('product-item').appendTo($list);
      $('<h3>').text(product.name).appendTo($item);
      $('<p>').text(product.description).appendTo($item);
      $('<span>').text('$' + product.price).appendTo($item);
    });
  },
  error: function() {
    // Xử lý lỗi
    console.log('Failed to load data');
  }
});

rong đoạn mã trên, chúng ta sử dụng hàm $.each() của jQuery để lặp qua danh sách sản phẩm và tạo các phần tử HTML tương ứng để hiển thị thông tin sản phẩm đó. Sau đó, chúng ta sử dụng phương thức appendTo() của jQuery để thêm các phần tử HTML này vào danh sách sản phẩm trên trang web.

Với cách làm này, chúng ta có thể tải và hiển thị dữ liệu động từ API trên trang web một cách dễ dàng và tiện lợi.