السلام عليكم.
شكراً
هل يمكن جلب معلومات من قاعدة البيانات بدون تحدبث الصفحة كاملة
يمكنك ذلك باستخدام تقنيات الويب الحديثة مثل AJAX أو Fetch API في JavaScript، تسمح هذه التقنيات بإرسال واستقبال البيانات من الخادم بدون الحاجة إلى إعادة تحميل الصفحة بالكامل، مما يجعل تجربة المستخدم أكثر سلاسة وكفاءة، يمكنك استخدام مكتبة مثل jQuery لتبسيط عملية تنفيذ AJAX، وهذا مثال بسيط:
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="loadData">Load Data</button>
<div id="dataContainer"></div>
<script>
$(document).ready(function() {
$('#loadData').click(function() {
$.ajax({
url: 'fetch_data.php',
type: 'GET',
success: function(data) {
$('#dataContainer').html(data);
},
error: function(xhr, status, error) {
console.error('Error fetching data:', error);
}
});
});
});
</script>
</body>
</html>
يمكنك أن تطلع على هذه المقالات لتفهم أكثر :
يمكنك أيضاً كما وضح شهاب في التعليق السابق استخدام Fetch API حيث يعد خيارًا أحدث وأبسط من استخدام AJAX لذلك، يفضل استخدام Fetch API للعديد من الأسباب التالية
- أحدث وأفضل من حيث الأداء والتوافقية
- Fetch API يمكن استخدامه بسهولة مع promise chains و asynchronous/await .
- واجهة البرمجة لـ Fetch API أبسط وأكثر تنظيماً مقارنة بتعقيدات XMLHttpRequest.
وهذا مثال باستخدام Fetch API:
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
<script>
async function loadData() {
try {
let response = await fetch('your-server-endpoint');
let data = await response.text();
document.getElementById("data").innerHTML = data;
} catch (error) {
console.error('Error:', error);
}
}
</script>
</head>
<body>
<h2>Fetch API Example</h2>
<button type="button" onclick="loadData()">Load Data</button>
<div id="data"></div>
</body>
</html>
وعليكم السلام ورحمة الله وبركاته .
نعم بالطبع يمكنك ذلك ولكن هذا يعتمد على حجم مشروعك وما الذى تريد تنفيذه .
إذا كان الأمر بسيط يمكنك إستخدام تقنية مثل AJAX في JQuery أو أمر fetch في JavaScript للإتصال بالخادم عن
طريق API ومن ثم عرض تلك البيانات في الصفحة ولكن كما وضحت لك يجب عليك إنشاء API لإحضار البيانات .
ولكن إذا كان المشروع كبيرا فيفضل إستخدام أطر عمل مثل react و أى إطار عمل لواجهة أمامية و ذلك حيث أن أطر العمل تقوم بكل شئ نيابة عنك مثل إنشاء العناصر ووضعها في الصفحة دون تحديث والتعامل مع ال API وإرسال الطلبات وهذا للحفاظ على سرعة الموقع حيث تستخدم أطر العمل الحديثة Virtual Dom التي تسرع من عمل الصفحة حين إضافة وحذف العناصر من الصفحة .
وهذا مكون بسيط في react لإحضار البيانات من خلال API وعرضه في الصفحة
import React, { useState, useEffect } from 'react';
const DataDisplay = () => {
const [data, setData] = useState(null);
useEffect(() => {
// استدعاء الـ API هنا
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error('Error fetching data: ', error));
}, []);
return (
<div>
<h2>عرض البيانات</h2>
{data ? (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
) : (
<p>جارٍ التحميل...</p>
)}
</div>
);
};
export default DataDisplay;
التعليقات