أبسط مثال على PHP و Ajax - كود بسيط!

كود Ajax بسيط جداً:

        $(function() {

        $('form#send').on('submit', function(e) { // id="send" :في حال تم الارسال من الفورم

            e.preventDefault();

            var fisrt = document.getElementById('first').value; // id مسك محتوى خانة الاسم من خلال الـ
            var last = document.getElementById('last').value; // id مسك محتوى خانة الكنية من خلال الـ

            if(fisrt.length >= 1 && last.length >= 1) { // التأكد أن خانة الاسم و الكنية تحتوي على بيانات و ليست فارغة
                $.ajax({

                    type: 'POST', // نوع الطلب
                    url: 'req.php', // ملف الطلب
                    data: $('form#send').serialize(), // ارسال البيانات
                    success: function(data) { // بعد الارسال

                        document.getElementById("result").innerHTML = (data); // div result عرض النتيجة في

                    }
                });
            }
                 else {
                        document.getElementById("result").innerHTML = "الرجاء تعبئة كافة الخانات"; // في حال كانت الخانات فارغة
                 }

        });

    });

النتيجة:

http://uplody.com/ajax-php

الكود كاملاً على Github:

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

جميل .

لكن أحبذ أن يكون با pure javascript الأن الكود الي كتبته با استخدام مكتبة Jquery .

اعتقد انه قام بالخلط بين الإثنين

ما الفائدة أخى من عمله pure javascript فى حال أن مكتبة ال jquery تسهل الأمر

أم أنك تقصد للفائدة التعليمية فقط فى أول الطريق ؟ هل توجد فوائد أخرى ؟ وجزاك الله خيرا

من الجيد أن يعرف الناس خاصة المبتدئين في المجال الية العمل . بعدها يمكن أن تستعمل مكتبة تساعدك على الأمر أو أن تقوم با بنائها با مفردك إعتمادا على فهمك !

إذا كان يمكنك عمل الأمر بالـPure JS بدون تنزل مكتبة كاملة لتنفيذ هذا الكود البسيط، فالأمر لا يستحق عناء عمله بمكتبة jQuery أو ما شابهها.

أعتقد أن الأمر واضح .. ولكن تختلف الحالة إذا كان لديك مشروع كبير، عندها من الضروري (بل من الواجب إستخدام مكتبة مثل الـjQuery) لتطوير وتسريع وتيرة العمل، فهذا يتبع لمقولة (لا تعد إختراع العجلة).

او بأستخدام fetch API

هل يمكن إرسال البيانات لنفس الصفحة لتتم المعالجة بدل إرسالها لصفحة خارجية؟

+أعطني مثال على ذلك :)

شكراً