معهد دعم اتش فى اى بى اس لحلول الويب - Powered by vBulletin


 
 
النتائج 1 إلى 1 من 1

الموضوع: التحقق من اسم المستخدم باستخدام الاجاكس

  1. #1
    عضو جديد


    تاريخ التسجيل: Jun 2011
    رقم العضوية: 7
    المشاركات: 2,181
    HVIPS5 غير متواجد حالياً

    Stqou 759788f58d التحقق من اسم المستخدم باستخدام الاجاكس





    ان شاء الله فى الدرس دا
    هنعمل سكربت بسيط يقوم بالتحقق من user name متاح للتسجيل او غير متاح باستخدام الاجاكس
    اولا كود html
    كود PHP:
         <div align='center' >  User Name : <input name="username" type="text" id="username" value="" maxlength="15" />  
    <
    span id="msgbox" style="display:none"></span> </div
    فى السطر الاول عملنا مربع نص اسمة username والقيمة بتاعتة فارغة لاننا فى المربع هنكتب الاسم المراد التاكد من صلاحيتة
    فى السطر التانى استخدمنا العنصر المحياد span ولة id=msgbox لعمل تاثير باستخدام الاجاكس
    وبين تاجى <head> <head/>
    هنكتب جملة الاتصال بمكتبة الاجاكس
    كود PHP:
         <script src="jquery.js" type="text/javascript" language="javascript"></script> 
    والوقتى هنعمل خاصية focus out من مربع النص هنقوم باستدعاء الملفuser_availability.php
    واستخدام الاجاكس فى اظهار الرسالة وذلك باستخدام كودا javascript التالى

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

    كود PHP:
         <script language="javascript">

    $(
    document).ready(function()
    {
        $(
    "#username").blur(function()
        {
        
            $(
    "#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
            
    // التحقق من اسم المستخدم باستخدام الاجاكس
            
    $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
            {
              if(
    data=='no'//فى حالة اليوزر غير متاح
              
    {
                  $(
    "#msgbox").fadeTo(200,0.1,function() 
                { 
                  $(
    this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
                });        
              }
              else
              {
                  $(
    "#msgbox").fadeTo(200,0.1,function() 
                { 
                  $(
    this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);    
                });
              }
                    
            });
     
        });
    });
    </script> 
    والان مع ملف index.php مع بعض لمسات ال css البسيطة
    كود PHP:
         <html>
    <
    head>
    <
    title>التحقق من اسم التسجيل بالاجكس</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <
    script src="jquery.js" type="text/javascript" language="javascript"></script>
    <script language="javascript">

    $(document).ready(function()
    {
        $("#username").blur(function()
        {
        
            $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
            // التحقق من اسم المستخدم باستخدام الاجاكس
            $.post("user_availability.php",{ user_name:$(this).val() } ,function(data)
            {
              if(data=='no') //فى حالة اليوزر غير متاح
              {
                  $("#msgbox").fadeTo(200,0.1,function() 
                { 
                  $(this).html('اسم المستخدم غير متاح').addClass('messageboxerror').fadeTo(900,1);
                });        
              }
              else
              {
                  $("#msgbox").fadeTo(200,0.1,function() 
                { 
                  $(this).html('اسم المستخدم متاح للتسجيل').addClass('messageboxok').fadeTo(900,1);    
                });
              }
                    
            });
     
        });
    });
    </script>
    <style type="text/css">
    body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:11px;
    }
    .top {
    margin-bottom: 15px;
    }
    .messagebox{
        position:absolute;
        width:100px;
        margin-left:30px;
        border:1px solid #c93;
        background:#ffc;
        padding:3px;
    }
    .messageboxok{
        position:absolute;
        width:auto;
        margin-left:30px;
        border:1px solid #349534;
        background:#C9FFCA;
        padding:3px;
        font-weight:bold;
        color:#008000;
        
    }
    .messageboxerror{
        position:absolute;
        width:auto;
        margin-left:30px;
        border:1px solid #CC0000;
        background:#F7CBCA;
        padding:3px;
        font-weight:bold;
        color:#CC0000;
    }

    </style>
    </head>
    <body>

     
    <br>
    <br>
    <div align="center">
    <div class="top" > التحقق من  user name بالستخدام الاجاكس - <strong>username &quot;traidnt&quot;, &quot;egypt-it&quot; ,&quot;ayman&quot; </strong><br>
      من فضلك حرك مؤشر الماوس خارج المربع للتحقق من الاسم
    </div>
    <div >
       user name  : <input name="username" type="text" id="username" value="" maxlength="15" />
       <span id="msgbox" style="display:none"></span>
    </div>

    </div>
    </body>
    </html> 
    _____________________________
    ملف user_availability.php
    فى هذا الملف يتم التاكد من الاسم المدخل فى مربع النص موجود ومتاح للتسجيل ام لا

    كود PHP:
         <?php
    //هذا المتغير يحتوى على مصفوفة باسماء المستخدمين الغير متاحين
    $existing_users=array('traidnt','egypt-it','ayman'); 
    $user_name=$_POST['user_name'];
    //فحص الاسماء والتاكد من خلوها من المصفوفة السابقة
    if (in_array($user_name$existing_users))
    {
        
    //اسم المستخدم غير متاح للتسجيل
        
    echo "no";

    else
    {
        
    //اسم المستخدم متاخ للتسجيل
        
    echo "yes";
    }
    ?>
    فى السطر الثالث قمنا بعمل مصفوفة تحتوى على الاسماء الغير متاحىة للتسجيل
    لتجربة الاسكربت اضغط هنا
    الاسكربت مرفق كامل
    الملفات المرفقة
    • نوع الملف: zip ajax.zip‏ (20.1 كيلوبايت, 143 مشاهدات)

 

ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •