اشترك في مجموعة montadaphp.net حتى تصلك أخبار المنتدى  

بريدك الإلكتروني:

النتائج 1 إلى 9 من 9
شجرة الإعجاب4إعجاب
  • 4 Post By

الموضوع: [Jquery] إستخدام Ajax مع PHP

  1. #1
    عضو شرف الصورة الرمزية فراس اللو
    تاريخ التسجيل
    30-08-2007
    السن
    28
    المشاركات
    582
    معدل تقييم المستوى
    11

    افتراضي [Jquery] إستخدام Ajax مع PHP

    السلام عليكم ،

    بمناسبة إنتهاء الإمتحانات، قررت أن أكتب درس بسيط جداً يشرح التعامل مع مكتبة Jquery وتحديداً الـ Ajax في هذه المكتبة، المثال بسيط جداً وهو عبارة عن قائمة منسدلة نختار منها عنصر ويعرض لنا مباشرةً كلام عن هذا الإختيار .
    درسنا عبارة عن ثلاث ملفات، الأول يحتوي على مكتبة الـ Jquery وفقط نعمل له تضمين ضمن ملفاتنا، والملف الثاني يحتوي على القائمة التي سنختار منها الشركة ، وكذلك مكان لعرض مكان معلومات عن الشركة التي إخترناها ، أما الملف الثالث فيحتوي على معالجة للبيانات المرسلة من الصفحة الثانية. سنستخدم طريقة POST و هذا كود الصفحة الثالثة :
    كود PHP:
    <?php
     
    if ($_POST['sData'] == "Apple")
         {
         echo 
    "iPhone";
         }elseif(
    $_POST['sData'] == "Linux")
             {
             echo 
    "Ubuntu";
             }elseif(
    $_POST['sData'] == "Google")
                {
                echo 
    "Android";
                }
    ?>
    كما تلاحظون بساطة الكود من أجل فهم الفكرة، لدينا في المصفوفة POST متغير مفتاح اسمه sData نحلل القيمة ونطبع، وفي هذه الحالة يمكنك تطوير الكود من أجل جلب بيانات من قاعدة البيانات ! .
    نأتي الآن لكود الصفحة الثانية :
    كود HTML:
     <html dir="RTL">
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    function getData()
        {
        var Send = document.getElementById("company").value;
        $.ajax({
           type: "POST",
           url: "data.php",
           data: "sData="+Send,
           beforeSend: function() {
               $("div#info").html("جاري التحميل ....");
           },
       success: function(result)
       {
       
           $("div#info").html(result);
    }
      
     });
        }
    </script>
    <title>MontadaPHP Ajax(Jquery) With PHP</title>
    </head>
    <body>
    يرجى إختيار الشركة : <select id="company" name="company" >
    <option value="Apple">آبل </option>
    <option value="Linux">لينكس</option>
    <option value="Google">غووغل</option>
    </select><input type="button" value="عرض" onClick="getData();">
    <br/>
    <br/>
    معلومات عن الشركة : <div id="info"></div>
    </body>
    </html>
     
    في البداية عملنا تضمين لملف jquery.js لكي نتعامل مع المكتبة، ومن ثم عملنا function اسمها getData سنشرح مابداخلها بالتفصيل :
    كود:
    var Send = document.getElementById("company").value;
    عرّفنا متغير اسمه Send وضعنا فيه قيمة العنصر الذي يحمل معرّفه company وفي مثالنا هذا هو القائمة المنسدلة .
    كود:
    $.ajax({ type: "POST", url: "data.php", data: "sData="+Send, beforeSend: function() { $("div#info").html("جاري التحميل ...."); }, success: function(result) { $("div#info").html(result); } });
    نأتي الآن لشرح كائن Ajax المبني ضمن jQuery، لدينا في البداية حددنا طريقة الإرسال POST ويمكننا عملها GET لامشكلة مع مراعاة تغيير ذلك في الصفحة الثالثة التي شرحناها مسبقاً ، ومن ثم حددنا الصفحة المراد إرسال المعلومات لها وهي data.php ومن ثم نحدد الـمعلومات التي تريد ارسالها، كما تلاحظون السطر
    كود:
    "sData="+Send,
    sData هو المفتاح للمصفوفة POST كما قلت لكم و ال Send هي القيمة المختارة من القائمة المنسدلة .
    ماذا لو أردنا إرسال أكثر من قيمة واحدة ؟ لامشكلة الحل سهل :
    كود:
    "sData="+Send+"&newdata="+newdata,
    هذه هي الفكرة العامة،الآن نأتي للحدث beforeSend وهنا من أجل القيام بأشياء معينة قبل إرسال البيانات، وفي مثالنا فقط قمنا بوضع كلمة جاري التحميل في الـ div الذي سيعرض لنا المعلومات، الآن نأتي للحدث success وهنا في حالة نجاح الإتصال مع الصفحة المطلوبة سنعود بقيم منها(هذا المفروض ) والقيم هي التي حددناها في الصفحة الثالثة ، لذا قلنا له أنه في حالة النجاح نأخذ النتائج بمتغير سميناه result ويمكننا تسميته مانشاء ومن ثم ضع المعلومات التي حصلت عليها من الصفحة الثالثة في الـ div نفسه.
    الآن نأتي لشرح الـ body :
    قائمة منسدلة تحتوي على ٣ قيم ، و زر عند الضغط عليه نستدعي الدالة getData التي عرّفناها مسبقاً ، و من ثم div بمعّرف info لكي نعرض فيه المعلومات .

    هذا كل شيء ، وأي استفسار أنا جاهز بإذن الله.
    و أتمنى أن تقترحوا علي دروس لكي أكتبها لكم .

    haitham, Hussein Mostafa, ahmed78 و 1 آخرون معجبون بهذا .
    مُدونتي الشخصية : http://feras.ws
    مشاريعي : بديل أول موقع عربي للبحث عن بدائل التطبيقات
    http://badil.io
    انشر يوميًا حلقات تقنية على قناتي في يوتيوب
    tinyurl.com/feras2016

  2. #2
    عضو شرف الصورة الرمزية ملك الأرقام
    تاريخ التسجيل
    07-08-2009
    السن
    22
    المشاركات
    1,576
    معدل تقييم المستوى
    10

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    شكراً لك هل هناك معالجات أحداث أخرى غير success و beforeSend

  3. #3
    عضو شرف الصورة الرمزية فراس اللو
    تاريخ التسجيل
    30-08-2007
    السن
    28
    المشاركات
    582
    معدل تقييم المستوى
    11

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    نعم هناك الكثير مثل : cache و contentType و dataType والكثير منها، لم أتعامل معهم جميعاً ولكن يمكنك الرجوع لهذه الصفحة : jQuery.ajax() – jQuery API

    تحياتي لك .
    مُدونتي الشخصية : http://feras.ws
    مشاريعي : بديل أول موقع عربي للبحث عن بدائل التطبيقات
    http://badil.io
    انشر يوميًا حلقات تقنية على قناتي في يوتيوب
    tinyurl.com/feras2016

  4. #4
    عضو شرف
    تاريخ التسجيل
    07-02-2011
    المشاركات
    534
    معدل تقييم المستوى
    7

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    رائع جدا أخوي
    مبرمج php,html,css,js,ajax,jquery
    إيميلي
    i.radwan1996@gmail.com
    ساكي بي
    i.radwan.14
    هوتميل
    i.radwan1996@hotmail.com
    و الأفضل يا جماعة سكاي بي ثم جيميل ثم هوتميل

  5. #5
    عضو مشارك
    تاريخ التسجيل
    25-09-2011
    المشاركات
    30
    معدل تقييم المستوى
    0

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    هل يمكنك وضع رابط لتحميل مكتبة الـ jQuery المستخدمة هنا.

  6. #6
    عضو شرف الصورة الرمزية فراس اللو
    تاريخ التسجيل
    30-08-2007
    السن
    28
    المشاركات
    582
    معدل تقييم المستوى
    11

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    تفضل أخي الكريم :
    http://code.jquery.com/jquery-1.6.4.min.js
    مُدونتي الشخصية : http://feras.ws
    مشاريعي : بديل أول موقع عربي للبحث عن بدائل التطبيقات
    http://badil.io
    انشر يوميًا حلقات تقنية على قناتي في يوتيوب
    tinyurl.com/feras2016

  7. #7
    عضو جديد
    تاريخ التسجيل
    12-09-2012
    المشاركات
    1
    معدل تقييم المستوى
    0

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    روعة اخى فراس سلمت بخير

  8. #8
    فريق البرمجة والتصميم الصورة الرمزية robocon
    تاريخ التسجيل
    18-10-2009
    المشاركات
    1,212
    معدل تقييم المستوى
    10

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    مشكور وموفق للأمام
    داوم علي الذكر والاستغفار والصلاة على النبي


    موقعي الشخصي: http://www.fatahosoft.com/

    حسابي في تويتر: https://twitter.com/@fatahosoft

    بريدي الإلكتروني: fatahosoft @ hotmail . com

    مدونتى : http://fatahosoft.blogspot.com/


  9. #9
    عضو فعال
    تاريخ التسجيل
    12-01-2013
    المشاركات
    274
    معدل تقييم المستوى
    5

    افتراضي رد: [Jquery] إستخدام Ajax مع PHP

    شكرا على الشرح الرائع
    ممكن استفسار
    لو ان هناك قيمتين نريد ارسالهما الى data.php و القيمتين ليستا من فورم
    يعني ممكن كلمة اضغط عليها ترسل لي متغيرين mid و uid وبصيغة Get
    ففي مثالكم لديكم قائمة لها id باسم company
    اما ما اقصده فهي فقط كلمة لنقل انها add مثلا عند الضغط عليها ترسل قيمتين لمتغيرين كما ذكرت

    مرفق لكم ملف توضح الفكرة
    اريد عرض صفحة اخرى في div #add
    تحمل القيمتين التي ترسل عندما اضغط على الكلمة Add

    آسف لانني مبتديء جدا لكن الحاجة ماسة
    تحياتي
    الملفات المرفقة الملفات المرفقة

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

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

  1. عايز اتعلم PHP - MySql - Java - Ajax - JQuery
    بواسطة Waleed Khaled في المنتدى فرصة تجارية
    مشاركات: 5
    آخر مشاركة: 27-08-2011, 06:29 AM
  2. دورة الجميل فى ال jquery (Jquery & AJAX)
    بواسطة ماهر الجميل في المنتدى jQuery
    مشاركات: 2
    آخر مشاركة: 12-07-2011, 03:54 PM
  3. التخاطب مع زائر الموقع بواسطة jquery أو ajax
    بواسطة khalid_1405 في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 5
    آخر مشاركة: 22-11-2010, 08:35 PM
  4. مطلوب مطور ويب Php,Css,Ajax,Jquery
    بواسطة 2mato في المنتدى فرصة تجارية
    مشاركات: 3
    آخر مشاركة: 30-06-2010, 08:41 PM
  5. مشاركات: 0
    آخر مشاركة: 17-06-2010, 01:00 PM

الكلمات الدلالية لهذا الموضوع

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

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