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

**عبد الواحد البشيري** · 17-01-2009

بسم الله الرحمن الرحيم
في هذا الدرس سنركز على تقنية اجاكس
لن اقوم باعادة اختراع العجلة واشرح من الصفر متى ظهرت هذه التقنية او طريقة استخدامها مباشرة
سأشرح فقط كيفية التعامل مع الأجاكس من خلال مكتبة 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/ الذي يوجد فيه كل ما تود معرفته عن استخدام دوال المكتبة
ولو احببت ان يكون لديك دليل استخدام المكتبة في جهازك فتفضل قم بتحميله من المرفقات
اي نقطة تود الاستفسار عنها فيما يتعلق بالدرس فأنا موجود ان شاء الله
لن اعدكم بأي دروس مستقبلية لهذه المكتبة ولكن ربما اتطرق الى بعض المتفرقات ...
هذا فان اخطات فمن نفسي والشيطان وان اصبت فمن الله
والسلام عليكم ورحمة الله وبركاته

**Jo Live** · 17-01-2009

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

درس رائع جدا

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

**عبد الواحد البشيري** · 17-01-2009

تفضل

كود HTML:

    $("#loading")
    .hide() //مبدئيا سيتم اخفاء رسالة الانتظار
    .ajaxStart(function(){ // بعدها عند الطلب بالأجاكس 
         $(this).show(); // سيظهر رسالة الانتظار
		})
		.ajaxStop(function(){ // عند اكتمال طلب الصفحة يعني تم طباعته للمتصفح
			$(this).hide(); // سيتم اخفاء الرسالة
		});

التجربة في المرفقات
http://www.swalif.net/softs/attachme...1&d=1232221158

**Jo Live** · 18-01-2009

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

**عبد الواحد البشيري** · 23-01-2009

العفو اخي

**سالم العليلي** · 23-01-2009

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

**عبد الواحد البشيري** · 23-01-2009

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

**dev11** · 23-01-2009

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

**magoo_2003** · 27-01-2009

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

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

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

**عبد الواحد البشيري** · 27-01-2009

بين قيمة وقيمة ضع الفاصلة
مثال

كود 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'];
?>

**magoo_2003** · 28-01-2009

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

**magoo_2003** · 28-01-2009

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

**عبد الواحد البشيري** · 29-01-2009

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

**fares1** · 03-02-2009

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

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

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

**عبد الواحد البشيري** · 06-02-2009

تفضل اتمنى ان الفرة واضحة

كود 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>

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

أدوات الموضوع

بحث في الموضوع

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

المواضيع المتشابهه

الدرس الثالث تحريك ما تم استقبالة من XML دورة jquery & CSS

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

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

Ajax Basics بدايتك الى عالم الاجاكس [الدرس الاول+الثاني+الثالث]

سلسلة تعلم php فيديو (الدرس الثالث)

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