ساخت جدول ajax با PHP و جاوا اسکریپت + سورس
جدول ajax با PHP – با این آموزش میخواهیم یک جدول ajax را ایجاد کرده که اطلاعات خود را بدون نیاز به Reload از سرور دریافت کرده و نمایش دهد .
جدولی که در این آموزش داریم دارای اطلاعات ارز های دیجیتال می باشد که به قیمت تومان نمایش می دهد . البته داده های static می باشد و اگر می خواهید داده های واقعی را نمایش دهید باید از api یک وبسایت یا اگر api در دسترس ندارید با یک web scraper داده های را از html دریافت کرده و به json تبدیل کنید .
دموی جدول ajax
فایل index.php
<?php require_once "inc/functions.php"; ?>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<table class="table table-primary table-coin">
<thead>
<tr>
<th>لوگو</th>
<th>نام ارز دیجیتال</th>
<th>قیمت به تومان</th>
</tr>
</thead>
<tbody>
<?php foreach (getListCoins() as $item) : ?>
<tr class="ajx-element" id="id-<?= $item['slug'] ?>" data-slug="<?= $item['slug'] ?>">
<td class="td-logo"><img width="64" src="<?= $item['logo'] ?>"></td>
<td class="td-title"><?= $item['title'] ?></td>
<td class="td-price"><span class="price"><?= $item['price_to_irt'] ?></span><span class="currency me-1">تومان</span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<script src="static/js/app.js"></script>
</body>
</html>
اسکریپت app.js
document.addEventListener('DOMContentLoaded', function () {
function initXHR(config) {
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
xhr.open(config['method'], location.origin + "/" + "inc/api.php" + config['query']);
xhr.onload = config['onload'];
xhr.onerror = config['onerror'];
xhr.send();
}
setInterval(() => {
initXHR({
method: "GET",
query: "",
onload: function () {
const response = this.response;
const rowElementsDOM = document.getElementsByClassName("ajx-element");
for (const rowElementDOM of rowElementsDOM) {
const key = rowElementDOM.getAttribute("data-slug");
const priceDOM = rowElementDOM.querySelector(".td-price");
const oldPrice = priceDOM.querySelector(".price").textContent;
const newPrice = response[key]['price_to_irt'];
if(oldPrice != newPrice){
rowElementDOM.classList.add("table-warning");
priceDOM.querySelector(".price").textContent = newPrice;
setTimeout(function(){
rowElementDOM.classList.remove("table-warning");
} , 2000);
}
}
},
onerror: function () {
console.warn("XHR ERROR");
alert("خطا");
},
});
}, 4000);
});
استایل در فایل main.css
.table-coin tr td{
vertical-align: middle;
}
لیست نظرات
ممنون از سایت rapid code و بخصوص شخص آقای باقری که سورس پروژه های زیادی رو از ایشون توی سایت دیدم که پروژه های سطح بالایی هستن و یه برنامه نویس جونیور با تمرین این پروژه ها چیزای زیادی میتونه یاد بگیره ممنون که این بستر آموزشی خوب رو فراهم کردید
درود ، عرفان جان ، خوش حالم که آموزش های وبسایت مان برای شما مفید واقع شده .