استخدام الجيكوري في ادخال البيانات واستعراضها بدون الانتقال لصفحة

هل تريدون ان اضع هذا الدرس


عموما معكم اخوكم saudi.ok كنت اعطي دروس كثيرة عن الجيكوري في معهد ترايدنت ولي دروس كثيرة في php لكن للاسف ترايدنت متوقف لاني كنت اريد نسخ جميع الدروس اللي قدمتها وقدمت افكار برمجية كثيرة في ترايدنت

ركزوا معي

حنا نمتلك فورم ارسال بيانات

وليكون فيه الاسم والباسورد والايميل ونعطي لكل عنصر id

مثال

الان عندنا فورم حطيت فيه id =user id=pass id=mail

لاحظوا ان الاكشن في الفورم خليتها كذا action="#" لا تحط رابط صفحة php خليه #

الان انت تروح تعمل صفحة php لادخال البيانات الي القاعدة وتجهزها وتسميها مثلا insert.php

الان تعمل div فيه اكلاس اسمه text_box يظهر رسائل من الجيكوري بصفحة الفورم

الان نأتي الي صفحة الجيكوري التي تلعب دور الوسيط ترسل البيانات الي insert.php

وتجلب الرسائل من صفحة insert.php م

ركز معي اول شي لازم تضمن مكتبة الجيكوري بنفس صفحة فورم الارسال بالطريقة هذي

الان نفتح صفحة جديدة بالمحرر من نوع js

ونكتب الترويسة حقت الجيكوري ونكتب بداخلها الاكواد

$(document).ready(function(){ بداية الترويسة /كتب الاكواد هنا/ /لان نقوله اذا تم الضغط على زر sumbit/

$('#form').submit(function(){

/لان نعمل شروط نتاكد من ان الحقول ليست فارغه/ /قبلها نعمل متغيرات نضع فيها قيمة input

var user =$('#user').val(); var pass =$('#pass').val(); var mail = $('#mail').val(); val تعني value للحقل فهمتوا

الان نعمل الشروط لتاكد من if(user==""){

 $('.text_box').html("this user null").fadeIn(500).fadeOut(1000);

 return false;

  }else if(pass==""){

   $('.text_box').html('this password null').fadeIn(1000).fadeOut(500);

    return false;

         }else if(comm==""){

       $('.text_box').html('this mail null').fadeIn(1000).fadeOut(1000);



      return false;

   }

// بعد الانتهاء والتاكد من ان المستخدم قام بتعبيت البيانات الان نجهز البيانات ونضعها في متغير var x ={'user':user,'pass':pass,'mail':mail } ;

الان نقوله ارسلها الي صفحة insert.php

$.post(page_file,x,function(date){ هنا قلنا له من خلال $.post ارسلها الي insert.php مع البيانات المخزنة في المتغير x واجلب الرسائل من صفحة insert في date الان نستعرضها $(".text_box").html(date).fadeIn(500).fadeOut(1000);
return false;

 });

return false;

});

}); نهاية الترويسة