ارسال النماذج بدون تحميل الصفحة باستخدام الـ jQuery والملحق jQuery Form

من اهم ما يميز الـ jQuery هو مرونة الاستخدام والملحقات التي يمكن استخدامها لتوفير كتابة الكثير من الاكواد وإضاعة الكثير من الوقت، في هذه التدوينه سوف نتعرف على Jquery Form Plugin الملحق الخاص بمكتبة الجافا سكربت jQuery.

هذا الملحق يمكننا من ارسال البيانات التي نقوم بإدخالها في النموذج ( Form ) دون الحاجة إلى الذهاب إلى صفحة اخرى او اعادة تحميل الصفحة كما هو معتاد مع الصفحات العادية.

• مثال
• تحميل

طريقة الاستخدام

اولاً يجب علينا تحميل الملحق من هذا الرابط ومن ثم نقوم باستدعائه بعد استدعاء مكتبة الـ jQuery كالتالي:

HTML

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script src="jquery.form.js" type="text/javascript"></script>

الآن نأتي إلى الجزء المهم وهو اعدادات الملحق ليعمل على الموقع بشكل مناسب

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $('form.ajax').ajaxForm(function() { 
            alert( "تم ارسال البيانات بنجاح" ); 
        }); 
    }); 
</script>

HTML:Form

<form action="test.php" class="ajax" method="post">
    <label>العنوان <input name="title" type="text" /></label><br />
    <label>الرسالة <textarea name="message"></textarea></label><br />
    <input type="submit" value="ارسل البييانات" />
</form>

لاحظ اننا في الكود الثالث قد اضفنا كلاس لكود النموذج باسم ajax وذلك حسب تحديدنا له في كود الـ JavaScript

ما سبق بجزء الجافا سكربت هو الطريقة البسيطة والسهلة دون اي تعقيدات لإرسال البيانات ولكن يمكننا اضافة المزيد من الخصائص مثل ان تظهر رسالة اثناء ارسال البيانات ومن ثم اظهار رسالة بخطاء في البيانات او صحتها حسب نتيجة المعالجة في التطبيق البرمجي (PHP, ASP … ألخ)

JavaScript

<script type='text/javascript'>
    jQuery(document).ready(function(){
        $('form.ajax').ajaxForm({
            beforeSubmit: function(a,f,o) {
                o.dataType = 'json'; // json, xml
                
                // ضع هنا الأوامر التي تريد تنفيذها قبل عملية ارسال البيانات
                
            },
            success: function(data) {
                
                // ضع هنا الأوامر التي تريد تنفيذها بعد نجاح عملية الارسال
            
            }
        });
    });
</script>

لاحظ انني قد قمت بتحديد الـ dataType بـ json ( يمكنك تغييرها إلى xml ) وهو نوع البيانات/اللغة التي سوف يقوم التطبيق بالرد بها على البيانات المرسلة إلية من خلال الـ jQuery ( سوف نتعرف في تدوينه اخرى على طريقة معرفة اذا كانت البيانات المرسلة تم ارسالها من خلال الجافا سكربت او من خلال المستخدم بالطريقة التقليدية باستخدام الـ PHP )

• مثال
• تحميل