×

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

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

صورة 'the_traveller' الرمزية
قديمة 23 - 06 - 2010, 22:09
المشاركة 1
السلام عليكم ورحمة الله و بركاته

اخواني
لاحظت في الفترة الاخرة تعدد الطلبات على كفية عمل فورم اجاكس وارسال البيانات الى صفحه 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
هو عبارة عن فورم تسجيل دخول لكن بدون كود الفورم
وهذا من ضمن المرونه التي تمنحها لنا مكتبة الجي كويري اننا لا نحتاج وسم <form>
كل ما نحتاج اليه هو تحديد بداية ونهاية الفورم
وهو ما قمت بعمله هنا في الوسم
رمز 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 كيلوبايت, عدد مرات المشاهدة 1627 مرة)
iraqi-php, saif dadoo و bo3bdo معجبون بهذا .
بسم الله الرحمن الرحيم
ربنا لا تؤاخذنا إن نسينا أو أخطأنا
ربنا ولا تحمل علينا إصرا كما حملته على الذين من قبلنا
ربنا ولا تحملنا مالا طاقة لنا به
واعف عنا واغفر لنا وارحمنا
أنت مولانا فانصرنا على القوم الكافرين
صدق الله العظيم
سبحانك اللهم وبحمدك سبحان الله العظيم



دخول متقطع


المشاهدات 9827 | التعليقات 42
قديمة 23 - 06 - 2010, 22:49
المشاركة 2
الشريف الهاشمى
:: عضـــو::
تاريخ الإنضمام: 02 - 01 - 2009
رقم العضوية : 64580
الدولة : U.S.A
المشاركات: 87
1
افتراضي
شكراً بارك الله فيك شرح سلس ابداع
جزاك الله خير
قديمة 23 - 06 - 2010, 23:04
المشاركة 3
صورة 'Hudaislam' الرمزية
Hudaislam
:: عضو نشيط ::
تاريخ الإنضمام: 21 - 10 - 2007
رقم العضوية : 42725
الدولة : ^×0o --ركن لغات البرمجة --^×0o
المشاركات: 4,694
2
افتراضي
الله يعطيك الف عافية
في ميزان حسناتك
قديمة 23 - 06 - 2010, 23:07
المشاركة 4
saif dadoo
:: عضو نشيط ::
تاريخ الإنضمام: 03 - 03 - 2010
رقم العضوية : 78943
الدولة : سوري مقيم بالسعودية
العمر: 24
المشاركات: 942
افتراضي
مشكوووووووووووووووووووووو وور
اسم الشركه : redbeetle
صاحب الشركه : بهاء الدين لؤي دعدوع
أداء الشركـــه : خدمات تكنولوجيا المعلومات
بريد الشركـــه : [email protected]
هاتف الشركه : 00962780044247
قديمة 24 - 06 - 2010, 00:43
المشاركة 5
صورة 'أباظة أفندى' الرمزية
أباظة أفندى
:: عضو نشيط ::
تاريخ الإنضمام: 07 - 03 - 2007
رقم العضوية : 32940
الدولة : أرض الاحلام
المشاركات: 367
افتراضي
فية ناس ممكن تكون ما تعرفش طريقة التعامل مع الاجاكس ولكن الدرس دة هيفيدهم لانة خفيف وجميل وسهل الفهم
شكرا لك يا مصطفى ومبروك على الرتبة الجديدة لانى لسة واخذ بالى دلواتى
إجتهد لكى تتعلم ...... ثم علم غيرك
قديمة 24 - 06 - 2010, 01:13
المشاركة 6
هاوي برمجة
لم يقم بتفعيل عضويته
تاريخ الإنضمام: 26 - 01 - 2008
رقم العضوية : 51160
المشاركات: 4,500
2
افتراضي
جزاك الله خيرا أخي the_traveller....
قديمة 24 - 06 - 2010, 01:30
المشاركة 7
صورة 'hicho96' الرمزية
hicho96
:: عضو نشيط ::
تاريخ الإنضمام: 03 - 03 - 2010
رقم العضوية : 79312
الدولة : الجزائر
العمر: 23
المشاركات: 293
افتراضي
شكرا
قديمة 24 - 06 - 2010, 01:53
المشاركة 8
صورة 'الشرقاوي للبرمجة' الرمزية
الشرقاوي للبرمجة
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 07 - 2009
رقم العضوية : 66239
الدولة : المملكة العربية...المغربية طبعا
المشاركات: 4,536
افتراضي
السلام عليكم

بارك الله فيك استاذي عادل، درس رائع جدا

إسم المجموعة : الـشـرقـاوي لخدمات البرمجة والتصميم
إسم صاحب المجموعة : محمد عمر الشرقاوي المكناسي
رقم الهاتف : من داخل المغرب 0633457675 ومن خارج المغرب 00212633457675
البريد :[email protected]

قديمة 24 - 06 - 2010, 02:06
المشاركة 9
صورة 'UniJust' الرمزية
UniJust
:: عضو نشيط ::
تاريخ الإنضمام: 19 - 02 - 2010
رقم العضوية : 78689
الدولة : الأردن
العمر: 32
المشاركات: 513
2
افتراضي
ابدعت اخي الكريم
كنت بحاجة الى هذا الدرس
بارك الله فيك
اشهد ان لا إله إلا الله و اشهد ان محمد رسول الله
https://www.traidnt.net/vb/traidnt2380955
قديمة 24 - 06 - 2010, 02:29
المشاركة 10
ThE LuCkY MaN
:: عضو نشيط ::
تاريخ الإنضمام: 12 - 06 - 2008
رقم العضوية : 60052
الدولة : في سوريا حلب
المشاركات: 727
افتراضي
جزاك الله كل خير اخي
حسبنا الله ونعم الوكيل
ولا حول ولا قوة إلا بالله العلي العظيم
[/CENTER]
قديمة 24 - 06 - 2010, 03:07
المشاركة 11
صورة 'Dr.MathDev' الرمزية
Dr.MathDev
:: عضو نشيط ::
تاريخ الإنضمام: 15 - 10 - 2009
رقم العضوية : 72453
الدولة : بجوار الاندلس !!
المشاركات: 1,971
افتراضي
بارك الله فيك اخي مصطفى ،
روعة ، ولا تحرمنا من جديدك بالغالي ;)
أستغفر الله ، أستغفر الله
[/CENTER]
قديمة 24 - 06 - 2010, 17:09
المشاركة 12
صورة 'the_traveller' الرمزية
the_traveller
.:: عضو متألق ::.
تاريخ الإنضمام: 26 - 01 - 2008
رقم العضوية : 51149
الدولة : Egypt/Ksa
العمر: 41
المشاركات: 7,197
17
افتراضي
جزاكم الله خيرا اخواني على المرور والثناء
واتمنى الاستفادة للجميع
بسم الله الرحمن الرحيم
ربنا لا تؤاخذنا إن نسينا أو أخطأنا
ربنا ولا تحمل علينا إصرا كما حملته على الذين من قبلنا
ربنا ولا تحملنا مالا طاقة لنا به
واعف عنا واغفر لنا وارحمنا
أنت مولانا فانصرنا على القوم الكافرين
صدق الله العظيم
سبحانك اللهم وبحمدك سبحان الله العظيم



دخول متقطع


قديمة 24 - 06 - 2010, 18:14
المشاركة 13
صورة 'فكر ديزاين' الرمزية
فكر ديزاين
:: عضو نشيط ::
تاريخ الإنضمام: 05 - 03 - 2009
رقم العضوية : 65839
المشاركات: 4,271
29
افتراضي
السلام عليكم ورحمة الله تعالى وبركآته

مميز كعادتك أستاذي مصطفى ،، و دائما ما تأتي مواضيعك في أوقاتها :D

شكرا لك
تصميم، برمجة، دعم فني .
أميل : [email protected]




" إن الله يحب إذا عمل أحدكم عملاً أن يتقنه "

قديمة 25 - 06 - 2010, 23:44
المشاركة 14
صورة 'the_traveller' الرمزية
the_traveller
.:: عضو متألق ::.
تاريخ الإنضمام: 26 - 01 - 2008
رقم العضوية : 51149
الدولة : Egypt/Ksa
العمر: 41
المشاركات: 7,197
17
افتراضي
السلام عليكم ورحمة الله تعالى وبركآته

مميز كعادتك أستاذي مصطفى ،، و دائما ما تأتي مواضيعك في أوقاتها :D

شكرا لك
جزاك الله خيرا يا عزيزي

شاكر مرورك
بسم الله الرحمن الرحيم
ربنا لا تؤاخذنا إن نسينا أو أخطأنا
ربنا ولا تحمل علينا إصرا كما حملته على الذين من قبلنا
ربنا ولا تحملنا مالا طاقة لنا به
واعف عنا واغفر لنا وارحمنا
أنت مولانا فانصرنا على القوم الكافرين
صدق الله العظيم
سبحانك اللهم وبحمدك سبحان الله العظيم



دخول متقطع


قديمة 26 - 06 - 2010, 00:02
المشاركة 15
The-IMADE
تحت المجهر
تاريخ الإنضمام: 15 - 10 - 2009
رقم العضوية : 71625
الدولة : في البرمجة و التصميم
المشاركات: 163
افتراضي
مشكور أخي مصطفى
أنا كنت تعاملت مع هذه الأنواع من الفورم و حقاً هي رائعة و مكتبة الجيكيري تزيدها روعة
+
أتمنى أن ترد على استفساري هنا
https://www.traidnt.net/vb/traidnt1599494/
 
اضافة رد
 

التحقق من ان https متوفره في الموقع او لا مع اعادة التوجيهه له اذا كان موجود ! عداد سنوي مثل الفيس بوك بدالة for

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 14:07.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2020, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.