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







السلام عليكم ورحمة الله و بركاته اخواني لاحظت في الفترة الاخرة تعدد الطلبات على كفية عمل فورم اجاكس وارسال البيانات الى صفحه 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",
      
datadataString,
      
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",
      
datadataString,
      
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/

نوع الملف : zip ajax_send.zip (18.0 كيلوبايت


http://www.traidnt.net/vb/showthread.php?t=1597486