Revision history [back]

Here are the steps to store data in a data attribute and utilize it through Ajax:

1. Set data attribute: First, set the data attribute for the HTML element where you want to store the data. For example, to store a product ID, you can set the data-product-id attribute as follows:

<div class="product" data-product-id="123">Product details</div>

1. Retrieve data using jQuery: Next, use jQuery to retrieve the data from the data attribute. You can use the data() or attr() method as follows:

var productId = $(".product").data("product-id");

1. Use Ajax to retrieve data: Finally, use Ajax to retrieve data based on the value of the data attribute. For example, to get the details of the product with ID 123, you can make an Ajax call as follows:

$.ajax({
  url: "product-details.php",
  data: { id: productId },
  success: function(result) {
    // handle result
  }
});

In this example, the data property is used to pass the productId variable to the server-side PHP script. The result parameter in the success function contains the data retrieved from the server.