صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 15 من 16

الموضوع: دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثالث والأخير] -ajax-

  1. #1

    دليلك السهل في تعلم استخدام مكتبة jQuery [الدرس الثالث والأخير] -ajax-



    بسم الله الرحمن الرحيم
    في هذا الدرس سنركز على تقنية اجاكس
    لن اقوم باعادة اختراع العجلة واشرح من الصفر متى ظهرت هذه التقنية او طريقة استخدامها مباشرة
    سأشرح فقط كيفية التعامل مع الأجاكس من خلال مكتبة jQuery
    لنبدأ
    هناك ثلاث مستويات في المكتبة للتعامل مع الأجاكس
    اولا : load
    ثانيا : $.get و $.post
    ثالثا : $.ajax

    الدالة loadالتعامل معها سهل جدا
    تستطيع جلب الملف كما هو انظر الى المثال رقم 1 وتستطيع ايضا التعامل مع طريقة get انظر الى المثال الثاني


    مثال رقم 1
    كود PHP:
    <html>
    <
    head>
    <
    script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $("a").click(function(){
        $("#contents").load("ajax.php");
        });
        
    });
    </script>
    </head>
    <body>

    <a href="#" title="page1">جلب المحتويات عن طريق اجاكس</a>
    <div id="contents"></div>

    </body>
    </html> 
    وصفحة ajax.php
    كود PHP:
    <?php

    $name
    ="عبد الواحد البشيري<br />";
    // مجرد مثال
    for($i=0;$i<500;$i++){
       echo 
    $name."\n";

    }

    ?>
    مثال رقم 2
    كود PHP:
    $(document).ready(function(){
        
        $(
    "a").click(function(){
        $(
    "#contents").load("ajax.php?name=abdelouahid");
        });
        
    }); 
    وصفحة
    ajax.php
    كود PHP:
    $name=$_GET['name'];
    echo 
    $name
    الدالة post و get متقدمة اكثر من الدالة السابقة
    post التعامل معها عن طريق post
    get عكس الدالة السابقة


    طريقة post
    كود PHP:
    <html>
    <
    head>
    <
    script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $("input:submit").click(function(){
            $.post("ajax.php",{name:$("#name").val()},function(data){
            $("#contents").html(data);
            });
            return false;
        });    
    });
    </script>
    </head>
    <body>

    <form method="post" action="#">
    الأسم الكريم<input type="text" name="name" id="name"></br>
    <input type="submit" value="تنفيذ"></br>
    </form>
    <div id="contents"></div>

    </body>
    </html> 
    صفحة ajax.php
    كود PHP:
    $name=$_POST['name'];
    echo 
    $name
    $("#name").val() = القيمة التي تم ادخالها في الحقل


    طريقة get
    كود PHP:
    $(document).ready(function(){
        
        $(
    "a").click(function(){
            $.
    get("ajax.php",{name:"abdelouahid elbachiri"},function(data){
            $(
    "#contents").html(data);
            });
        });    
    }); 
    name:"abdelouahid elbachiri" المعلومات التي يتم طلبها عن طريق الرابط
    مثل ajax.php?name=abdelouahid elbachiri

    صفحة ajax.php
    كود PHP:
    $name=$_GET['name'];
    echo 
    $name

    اما الدالة ajax فهي دالة شاملة تستطيع استخدام كلتا الحالتين السابقتين
    post او get
    يمكن التعرف على كيفية استخدامها ومن خلال دليل الاستخدام بكل سهولة



    وأخيرا عليكم بتصفح هذا الموقع http://visualjquery.com/ الذي يوجد فيه كل ما تود معرفته عن استخدام دوال المكتبة
    ولو احببت ان يكون لديك دليل استخدام المكتبة في جهازك فتفضل قم بتحميله من المرفقات
    اي نقطة تود الاستفسار عنها فيما يتعلق بالدرس فأنا موجود ان شاء الله
    لن اعدكم بأي دروس مستقبلية لهذه المكتبة ولكن ربما اتطرق الى بعض المتفرقات ...
    هذا فان اخطات فمن نفسي والشيطان وان اصبت فمن الله
    والسلام عليكم ورحمة الله وبركاته





    الملفات المرفقة الملفات المرفقة
    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com


  2. #2
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    597


    اشكرك جزيل الشكر

    درس رائع جدا

    ( لكن لدي سؤال .. كيف يمكنني وضع رسالة او صورة .. مثلا : الرجاء الانتضار قليلا ريثما يتم تنفيذ طلبك ) ؟؟






  3. #3


    تفضل
    كود HTML:
        $("#loading")
        .hide() //مبدئيا سيتم اخفاء رسالة الانتظار
        .ajaxStart(function(){ // بعدها عند الطلب بالأجاكس 
             $(this).show(); // سيظهر رسالة الانتظار
    		})
    		.ajaxStop(function(){ // عند اكتمال طلب الصفحة يعني تم طباعته للمتصفح
    			$(this).hide(); // سيتم اخفاء الرسالة
    		});
    التجربة في المرفقات
    http://www.swalif.net/softs/attachme...1&d=1232221158





    الملفات المرفقة الملفات المرفقة
    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  4. #4
    عضو نشيط جدا
    تاريخ التسجيل
    Aug 2007
    المشاركات
    597


    الف الف شكر لك اخي العزيز ..
    الله يجعلها في ميزات حسناتك ..






  5. #5


    العفو اخي





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com



  6. جزاك الله ألف خير .. ووفقك ورزقك الذريه الصالحه ..






  7. #7


    واياك اخي الكريم





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  8. #8
    عضو سوبر نشيط
    تاريخ التسجيل
    May 2007
    المشاركات
    613


    من يقوم بالتعمق في دراسة jQuery سيجد متعة لا توصف بالفعل ! هذه المكتبة قامت بوضع أسلوب جديد كلياً لكتبة برامج الـ Javascript ، شكراً لك أخي الكريم ..





    __________________
    مدونة؟

  9. #9
    عضو جديد
    تاريخ التسجيل
    May 2008
    المشاركات
    5


    جزاك الله خيرآ استاذ عبد الواحد
    بس ليا سؤال
    بالنسبة لPOST

    لو عاوز ارسل اكتر من معلومة واكتر من متغير يعنى انت شارح فى المثال انوة يرسل name بس
    طيب لو عاوز ابعت الاسم والسن والعنوان مثلا هيتم كتبابة التلت متغيرات ازاى ؟
    $.post("ajax.php",{name:$("#name").val()},function(data){
    هنا وبلاخص هنا
    ",{name:$("#name").val()},

    وجزاك الله خيرآ






  10. #10


    بين قيمة وقيمة ضع الفاصلة
    مثال
    كود HTML:
    <html>
    <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $("#click").click(function(){
            $.post("ajax.php",{
            name:$("#name").val(),
            age:$("#age").val()
            },function(data){
            $("#contents").html(data);
            });
            
        });    
    
        $("#loading")
        .hide() //مبدئيا سيتم اخفاء رسالة الانتظار
        .ajaxStart(function(){ // بعدها عند الطلب بالأجاكس 
             $(this).show(); // سيظهر رسالة الانتظار
    		})
    		.ajaxStop(function(){ // عند اكتمال طلب الصفحة يعني تم طباعته للمتصفح
    			$(this).hide(); // سيتم اخفاء الرسالة
    		});
    });
    </script>
    </head>
    <body>
    name<input type="text" id="name" name="name" />
    <br />age<input type="text" id="age"  name="age" />
    <div id="click">click</div>
    
    <div id="loading" >loading...</div>
    <div id="contents">
    </div>
    
    </body>
    </html>
    صفحة الاستقبال
    كود PHP:
    <?php
    echo $_POST['age'];
    echo 
    '<hr />';
    echo 
    $_POST['name'];
    ?>






    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  11. #11
    عضو جديد
    تاريخ التسجيل
    May 2008
    المشاركات
    5


    جزاك الله خيرآ اخى عبد الواحد وياريت ميكون الدرس التالت دة الاخير تكمل جميلك وتشرحلنا دروس تانية شرحج بجد جامممد
    وجزاك الله خيرآ






  12. #12
    عضو جديد
    تاريخ التسجيل
    May 2008
    المشاركات
    5


    معلش سؤال اخير
    انا دلوقتى عاوز استخدم خاصية ال?POST
    بس عاوز لما ادوس على الزرار بتاع الفورم Form
    يختفى الفورم ويظهر النتيجة مش النتيجة تظهر مثلا فى الحتة الى انا عاوزها والفورم موجود






  13. #13


    استخدم خاصية hide() للفورم





    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com

  14. #14
    عضو نشيط
    تاريخ التسجيل
    Jan 2008
    المشاركات
    213


    يعطيك العافيه يا غالي
    بس عندي سؤال بسيط الله يخليك

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

    شكرا يا غالي
    لو كان في حل يا ريت تفيدني الله يخليك






  15. #15


    تفضل اتمنى ان الفرة واضحة
    كود PHP:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        
        $("a").click(function(){
            var data=$(this).html();
            $("#show").load("ajax.php?show="+data);
        });
        $("#loading")
        .hide() //مبدئيا سيتم اخفاء رسالة الانتظار
        .ajaxStart(function(){ // بعدها عند الطلب بالأجاكس 
             $(this).show(); // سيظهر رسالة الانتظار
            })
            .ajaxStop(function(){ // عند اكتمال طلب الصفحة يعني تم طباعته للمتصفح
                $(this).hide(); // سيتم اخفاء الرسالة
        });
    });
    </script>
    </head>
    <body>
    <?php
    $show
    =$_GET['show'];
    $data=array('name'=>'abdelouahid elbachiri',
                
    'age'=>'28 years',
                
    'phone'=>'00212000000',
                
    'adresse'=>'bd youssef ben tachfine n 298',
                
    'site'=>'http://bp.ma'
                
    );
    if( isset(
    $show) ){
        echo 
    $data[$show];
    }else{
        foreach( 
    $data as $key => $val ){
        echo 
    "<p><a href='ajax.php?show=".$key."' onClick='return false;'
         title='"
    .$key."'>".$key."</a></p>";
        }
    }
    ?>
    <div id="loading" style="display:none">loading...</div>

    <div id="show">
    </div>

    </body>
    </html>






    __________________
    عدت
    اقتراحاتكم -> www.elbachiri.com





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

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

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