السلام عليكم ورحمة الله و بركاته اخواني لاحظت في الفترة الاخرة تعدد الطلبات على كفية عمل فورم اجاكس وارسال البيانات الى صفحه php اخرى دون اعادة تحميل الصفحه وبالتالي في هذا الموضوع سأوم ان شاء الله بشرح العملية وهي بسيطه جدا لا تتطلب الا بعض اكواد بالجافا اسكربت وعلى وجه التحديد مكتية jquery الى جانب بعض اكواد html اول شيء نبدأ بسم الله ونقوم بتحميل مكتبة الجي كويري ثانيا نقوم بعمل فورم عادي جدا بدون وضع كود الفورم فيها كالتالي

رمز PHP:

   <div id='loginform'>
        <div align='center'>
        <table align='center'>
        <tr>
            <td>
            <div align="center">
            <div><span >إسم المستخدم</span></div>
            <input type='text' autocomplete="off" name='username' id="username"  size='15' />
            <div><span >كلمة المرور</span></div>
            <input type='password' name='userpass' id="userpass" autocomplete="off" size='15' />
            <div><input type="checkbox" id="remmberme" name="remmberme" />&nbsp;<span >تذكرني</span></div>
            <input type='submit' id='login'  value='تسجيل الدخول'  />
            </div>
            </div>
            </td>
        </tr>
        </table>
        </div>  

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

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

رمز PHP:

   <div id='loginform'>
   محتويات الفورم هنها
   </div>  

وهي نقطه مهمه سنتاولها في عملية التنقل بين الرسائل والعمليات الجمالية للارسال وايضا اعطينا زر الارسال id وهو login وايضا جميع ال input في الفورم تم اعطؤهم ايديهات وهي مهمه لجلب القيم الخاصه بهم في الاجاكس الان نحتاج الى div اخر مهمته هي اظار رساله انتظار ان العملية قيد التنفيذ ويمكن تصويرة كالتالي

رمز PHP:

<div id='loginhandle' style='display:none' >
        <div align='center'>
        <br /> يرجي الانتظار
        </div>
        </div>  

ومن الملاحظ اننا اعطيناه خاصية عدم الظهور اي انه لن يظهر الا بناءا على الطلب من خلال الكود ما نحتاج اليه اخيرا هو div اخير يتم ظهور به الرسائل القادمة من عملية المعالجة اي النتيجه القادمة من فورم php بعدي تسجيل الدخول وليكن كالتالي

رمز PHP:

    <div id='msgreturn' style='display:none' >
       <div id='msgreturn' class='msgreturn' > </div>
       </div>  

الملاحظ هنا انه يوجد contaier او div رئيسي مخفي ايضا ولا يظهر الا بناءا على الطلب وبداخله ديف اخر وهو ما ستظهر بداخله رسائل المعالجة بحيث يكون كود الفورم كاملا كالتالي

رمز PHP:

   <div id='loginform'>
        <div align='center'>
        <table align='center'>
        <tr>
            <td>
            <div align="center">
            <div><span >إسم المستخدم</span></div>
            <input type='text' autocomplete="off" name='username' id="username"  size='15' />
            <div><span >كلمة المرور</span></div>
            <input type='password' name='userpass' id="userpass" autocomplete="off" size='15' />
            <div><input type="checkbox" id="remmberme" name="remmberme" />&nbsp;<span >تذكرني</span></div>
            <input type='submit' id='login'  value='تسجيل الدخول'  />
            </div>
            </div>
            </td>
        </tr>
        </table>
        </div>
        </div>
        <div id='loginhandle' style='display:none' >
        <div align='center'>
        <br /> يرجي الانتظار
        </div>
        </div>
        <div id='msgreturn' style='display:none' >
       <div id='msgreturn' class='msgreturn' > </div>
       </div>  

الان نقوم ببناء كود الاجاكس اولا نقوم بتضمين مكتبة الجي كويري

رمز PHP:

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

ثانيا نحتاج الى حدث معين وهو عند الضغط على زر الدخول يتم تنفيذ الاوامر اذن نقوم ببناء اول حدث وهو عند الضغط على زر تسجيل الدخول

رمز PHP:

$("#login").click(function() {  

يعني عند الضغط على زر تسجيل الدخول يتم بداية الاحداث اول شيء نقوم بإخفاء فورم تسجيل الدخول واظهار فورم جاري الانتظار وتكون كالتالي

رمز PHP:

$('#loginform').slideToggle('#loginhandle');  

اي التبديل بين فورم تسجيل الدخول والديف الخاص بالإنتظار جاري التنفيذ ثم نعطي الديف الخاص بالانتظار قليلا بعض النواحي الجمالية وهي الظهرو ببطء بحيث يكون كالتالي

رمز PHP:

$('#loginhandle').show("slow");  

ثالثا جلب قيم الحقول في الفورم كالتالي

رمز PHP:

 var name = $("input#username").val();
      var password = $("input#userpass").val();
      var remmberme = $("input#remmberme").val();  

وبالتالي تظهر قيمه الاي دي الخاصه بكل حقل في الفورم حيث يتم جلب قيمته عن طريق الاي دي الخاص به ثم نقوم بتجميع هذه القيم في متغير واحد

رمز PHP:

 var dataString = 'username='+ name + '&userpass=' + password + '&remmberme=' + remmberme ; 

طبعا لو ان هناك مثلا فورم بها 30 حقل انبت لن نقوم بعمل هذه الطريقه وانما توفر لنا مكتبة الجي كويري عمل serlize لها جميعا في متغير واحد وسأقوم بنتاولها ان شاء الله فيما بعد الان لدينا جميع المتغيرات والقيم نحتاج الان الى ارسالهم الي صفحه البي اتش بي ويكون كالتالي اولا تحديد نوعية الارسال ثانيا تحديد صفحه الارسال ثالثا تحديد البيانات المرسله رابعا بناء بعض المظاهر الجمالية في الفورم خامسا الرجوع بالنتيجه يكون كالتالي

رمز PHP:

    $.ajax({
      type: "POST",
      url: "test.php",
      data: dataString,
      success: function(msg) {
        $('#loginhandle').slideToggle('#msgreturn');
        $('#msgreturn').show("slow");
        $('#msgreturn').html(msg)
        .hide()
        .fadeIn(1500, function() {
        });
      }
     });  

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

رمز PHP:

$('#loginhandle').slideToggle('#msgreturn');  

ثم اعطيناه مؤثر الظهور ببطء

رمز PHP:

$('#msgreturn').show("slow");  

واخيرا النقطه الاخيرة وهي الرسالة القادمة من ملف البي اتش بي تم تخيصي الديف الاخير فيها بداخل كونتينر الديف الاخبير وايضا يتم ظهورها بتأثير الفاد

رمز PHP:

$('#msgreturn').html(msg)
        .hide()
        .fadeIn(1500, function() {
        });  

وهذا هو الكود بالكامل

رمز PHP:

<script type="text/javascript">
$(function() {
  $("#login").click(function() {
         $('#loginform').slideToggle('#loginhandle');
        $('#loginhandle').show("slow");
      var name = $("input#username").val();
      var password = $("input#userpass").val();
      var remmberme = $("input#remmberme").val();
      var dataString = 'username='+ name + '&userpass=' + password + '&remmberme=' + remmberme ;
        $.ajax({
      type: "POST",
      url: "test.php",
      data: dataString,
      success: function(msg) {
        $('#loginhandle').slideToggle('#msgreturn');
        $('#msgreturn').show("slow");
        $('#msgreturn').html(msg)
        .hide()
        .fadeIn(1500, function() {
        });
      }
     });
    return false;
    });
});
   </script>  

وأخيرا ارجو ان اكون وفقت في الشرح وأن يسفيد الجميع مرفق ملف العمل ملاحظة اخيره طبعا هنا في هذا العمل استخدمنا مؤثرين فقط من مكتبة كبيرة من المؤثرات وهما التبديل بين الديفين والظهور ببطء ويمكن اضافة العديد من المؤثرات الاخري وتجدها كلها في هذا الرابطhttp://api.jquery.com/category/effects/

ajax_send.zip (18.0 كيلوبايت

---