https://github.com/denatajp/ajax-html
Manipulate the DOM on a web page and receive data asynchronously from the server by utilizing AJAX in Javascript.
https://github.com/denatajp/ajax-html
ajax html javascript
Last synced: about 2 months ago
JSON representation
Manipulate the DOM on a web page and receive data asynchronously from the server by utilizing AJAX in Javascript.
- Host: GitHub
- URL: https://github.com/denatajp/ajax-html
- Owner: denatajp
- Created: 2024-09-01T06:40:15.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-01T07:13:41.000Z (10 months ago)
- Last Synced: 2025-04-04T05:19:10.514Z (2 months ago)
- Topics: ajax, html, javascript
- Language: HTML
- Homepage:
- Size: 338 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Asynchronous Web using AJAX
This project is a website that showcases various musical instruments, utilizing AJAX to dynamically load data without needing to refresh the page. AJAX (Asynchronous JavaScript and XML) allows for asynchronous data retrieval from the server, enabling users to view and filter products seamlessly without interruption.
AJAX is used in this project to fetch musical instrument data from a JSON file (data/data-alat.json) and display it on the webpage without reloading the entire page. With AJAX, content changes such as filtering based on instrument type can be performed quickly and efficiently, only updating the relevant parts of the page.
# How AJAX Enhances User Experience
- **No Full Page Reloads**: With AJAX, users can interact with the website—such as filtering or searching for products—without the page needing to reload completely. This leads to a smoother and faster browsing experience.
- **Dynamic Content Loading**: AJAX enables the website to load new content, such as different instrument categories, directly into the page without disrupting the user’s session.
- **Efficient Data Handling**: By using AJAX, the website only requests the necessary data from the server, reducing bandwidth usage and improving performance.
# Example AJAX Implementation
Here is an example of how AJAX is used to retrieve and display musical instrument data:
```javascript
function tampilSemuaAlat() {
$.getJSON('data/data-alat.json', function (data) {
let alat = data.alat;
$('#product-list').empty();
$.each(alat, function (i, data) {
$('#product-list').append(`
` + data.nama + `
` + data.deskripsi + `
Rp. ` + data.harga.toLocaleString('id-ID') + `
Beli Sekarang
`);
});
});
}
tampilSemuaAlat();
```
In the code above, AJAX is used with jQuery to retrieve data from data/data-tools.json. The results are then processed and displayed dynamically in the #product-list element without reloading the page.
# Filtering Products with AJAX
Users can also filter musical instruments by type. Here is an example of how AJAX is used to reload the displayed products based on the selected filter:
```javascript
$('.dropdown-item').on('click', function () {
$('.dropdown-item').removeClass('active');
$(this).addClass('active');
let jenisAlat = $(this).html();
if (jenisAlat == 'All') {
tampilSemuaAlat();
return;
}
$.getJSON('data/data-alat.json', function (data) {
let alat = data.alat;
let content = '';
$.each(alat, function (i, data) {
if (data.jenis == jenisAlat.toLowerCase()) {
content += `
` + data.nama + `
` + data.deskripsi + `
Rp. ` + data.harga.toLocaleString('id-ID') + `
Beli Sekarang
`;
}
});
$('#product-list').html(content);
});
});
```
This code shows how AJAX is used to retrieve data that matches the filters selected by the user and update the page content without reloading the entire page.