هل يمكن جلب معلومات من قاعدة البيانات بدون تحدبث الصفحة كاملة

السلام عليكم.

شكراً

يمكنك ذلك باستخدام تقنيات الويب الحديثة مثل 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>

يمكنك أن تطلع على هذه المقالات لتفهم أكثر :

https://wiki.hsoub.com/jQue...

عبدالباسط ابراهيم

2024-07-15T08:07:53+00:00
المزيد
- رابط مختصر

يمكنك أيضاً كما وضح شهاب في التعليق السابق استخدام 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>

محمد عاطف

2024-07-15T08:24:52+00:00
المزيد
- رابط مختصر

وعليكم السلام ورحمة الله وبركاته .

نعم بالطبع يمكنك ذلك ولكن هذا يعتمد على حجم مشروعك وما الذى تريد تنفيذه .

إذا كان الأمر بسيط يمكنك إستخدام تقنية مثل 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;

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

90.3 ألف متابع

هل يمكن جلب معلومات من قاعدة البيانات بدون تحدبث الصفحة كاملة

التعليقات

اقرأ أيضًا

تطوير الويب