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

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

صفحة 1 من 2 12 الأخيرةالأخيرة
النتائج 1 إلى 20 من 22
شجرة الإعجاب2إعجاب

الموضوع: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

  1. #1
    MEG
    MEG غير متواجد حالياً
    عضو شرف
    تاريخ التسجيل
    20-02-2008
    المشاركات
    41
    معدل تقييم المستوى
    0

    افتراضي تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    المقدمة :

    AJAX هي اختصار لـ Asynchronous JavaScript And XML

    و قد اخذت بالانتشار في عام 2005 بواسطة Google في مشروعهم Google Suggest

    و هي ليست بـ "لغة برمجة" جديدة , بل هي تقنية لانشاء تطبيقات ويب تفاعلية افضل و اسرع !

    بفضلها يمكن لـ JavaScript التواصل مباشرة مع الخادم ( Server ) باستخدام كائن XMLHttpRequest

    حيث يمّكن هذا الكائن JavaScript من تبادل البيانات مع الخادم دون الحاجة لاعادة تحميل الصفحة في كل مرة

    حيث يقوم بطلب جزء صغير من البيانات من الخادم بدلا من طلب الصفحة كاملة كما هو معلوم عند الغالبية منا

    اخيراً , تقنية AJAX مدعومة في كل المتصفحات الحديثة خصوصاً متصفح Firefix المفتوح المصدر و Opera


    لغات يفضل ان تلم باساسياتها قبل البدء :



    الموضوع جداً بسيط و لا يتطلب منك تعلم اشياء جديدة ما دمت تلم بالاساسيات

    فقط قم بنقل الاكواد الى جهازك و نفذها على خادمك المحلي ثم ابدأ بالتعديل عليها لتفهم اكثر


    مثال تطبيقي :

    مثالنا سيكون عبارة عن قائمة تعتمد على قائمة اخرى في اظهار عناصرها [ مثال ]

    عند اختيار احد المصنعين من القائمة الاولى سيتم عرض موديلات سيارته في قائمة الثانية


    اولاً : ملف الـ HTML و نموذج عرض القوائم

    كود HTML:
    <html>
    	<head>
    		<title>ajax</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<script src="main.js"></script> <!-- استدعاء ملف الجافا سكربت -->
    	</head>
    
    	<body>
    
    		<form name="car">
    			<select name="make" onChange="getInfo()"> <!-- قائمة المصنعين -->
    				<option value="0">- Select Make</option>
    				<option value="1">Toyota</option>
    				<option value="2">Nissan</option>
    				<option value="3">GMC</option>
    			</select>
    		</form>
    
    		<div id="main"> <!-- هنا سيتم طباعة قائمة الموديلات --></div>
    
    
    	</body>
    </html>
    اسم النموذج : car , اسم قائمة المصنعين : make

    ( عند اختيار عنصر منها سيتم استعداء دالة getInfo من ملف الجافا سكربت


    ثانياً : ملف PHP لجلب بيانات القائمة من قاعدة البيانات

    كود PHP:
    <?
        header
    ('Content-Type: text/html; charset=UTF-8');

        
    $id intval($_GET['id']); // رقم المصنع

        
    $link mysql_connect("localhost","root",""); // الاتصال بقاعدة البيانات
        
    $db mysql_select_db("car",$link); // تحديد قاعدة البيانات

        
    $sql "SELECT * FROM model WHERE make=$id"// البحث في قاعدة البيانات
        
    $result mysql_query($sql);

        echo 
    "<select name='model'>";
        echo 
    "<option value='0'>-- Select Model</option>"

        while ( 
    $row mysql_fetch_array($result) )
        {
            echo 
    "<option value='{$row['id']}'>{$row['name']}</option>"// طباعة عناصر القائمة
        
    }

        echo 
    "</select>";

        
    mysql_free_result($result);
        
    mysql_close($link);
    ?>
    اسم قاعدة البيانات : car ( ملف قاعدة البيانات و باقي الملفات في المرفقات )

    المتغير id : يحمل رقم المصنع في قاعدة البيانات المرسل عن طريق النموذج

    اذن سيقوم السكربت بالبحث في جدول موديلات السيارات ( model )

    عن الموديل الذي ينتمي للمصنع رقم id ثم يطبع الناتج في القائمة model


    ثالثاً : ملف الجافا سكربت الذي يطلب من الخادم و يرسل الى المتصفح

    كود PHP:
    var xmlHttp = new XMLHttpRequest(); // تعريف الكائن

    function getInfo()
    {
        
    xmlHttp.open('get','test.php?id='document.car.make.selectedIndex); // ارسال الطلب
        
    xmlHttp.onreadystatechange handleInfo;
        
    xmlHttp.send(null); // انهاء الطلب
    }

    function 
    handleInfo()
    {
        if(
    xmlHttp.readyState == 1)
        {
            
    document.getElementById('main').innerHTML 'loading ..';
        }

        else if(
    xmlHttp.readyState == 4)
        {
            var 
    response xmlHttp.responseText// رد الخادم
            
    document.getElementById('main').innerHTML response// طباعة القائمة
        
    }


    اهم خواص الكائن XMLHttpRequest

    1. الخاصية onreadystatechange

    تحتفظ هذه الخاصية بالدالة التي ستقوم بمعالجة طلب الخادم


    2. الخاصية readyState

    تعيد هذه الخاصية حالة الطلب كما يلي :

    0 = لم يجهز الطلب

    1 = الطلب جُهــز

    2 = الطلب ارسل

    3 = جاري معالجة الطلب

    4 = الطلب اكتمل


    3. الخاصية responseText

    تعيد هذه الخاصية رد الخادم و هو هنا عناصر القائمة التي تم طباعتها في ملف الـ PHP


    - كي نرسل طلب الى الخادم نحتاج الى الطريقة open و التالي تأخذ المعطيات التالية :

    1. طريقة ارسال الطلب GET او POST

    2. عنوان سكربت الـ php و طريقة ارسال المتغير id اليه


    - كي ننهي الطلب نحتاج الى الطريقة send


    اعتقد انه كل شئ اصبح واضح لكن تبقى اهم نقطة و هي ما يلي :

    كود PHP:
        else if(xmlHttp.readyState == 4)
        {
            var 
    response xmlHttp.responseText;
            
    document.getElementById('main').innerHTML response;
        } 
    في حال اكتمل الطلب سيتم اسناد رد الخادم الى المتغير response

    ثم ارساله الى الـ div ذا الاسم main اي في المكان المحدد لقائمة الموديلات


    اعذروني على التقصير فانا على عجل , لمزيد من التفاصيل راجعوا الرابط التالي :

    AJAX Tutorial
    الملفات المرفقة الملفات المرفقة
    • نوع الملف: zip ajax.zip‏ (2.1 كيلوبايت, 1541 مشاهدات)
    التعديل الأخير تم بواسطة MEG ; 27-08-2008 الساعة 01:44 AM
    Mr.HELMY و haitham معجب بهذا .

  2. #2
    عضو شرف
    تاريخ التسجيل
    27-08-2008
    المشاركات
    8
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    السلام عليكم ورحمة الله وبركاته

    جزاك الله اخى خير الجزاء لكن لدى استفسار وارجوا الرد باسرع وقت لاننى نفذت هذا الشرح ولكن هناك اخطاء حدثت

    واننى بحاجة الى هذه الاوامر ولكن اريد اضافة بعض الاشياء لها

    فأنا لدى اسكربت واريد التطوير عليه

    التطوير المطلوب هو كالتالى

    1- اضافة المحافظات والمناطق : يتم اضافة المحافظات اولاً وبعد ذلك يتم ادخال المناطق حسب كل المحافظة
    2- إضافة نوع العقار : هنا تدع لي الخيار في ادخال نوع العقار (عمارات – اراضي – شقق ) الخ
    3- اضافة عقار : يكون فيه قوائم الاولى المحافظة والثانية المنطقة (تتغير حسب المحافظة) والقائمة الثالثة هي نوع العقار .. طبعاً محتويات هذه القوائم سبق وتم ادخاله عن طريق الخطوة 1 و 2 .. وقائمة رابعة يكون فيها نوع العملية وتكون بثلاث خيارات (بيع – شراء – ايجار) وبعد ذلك العنوان وطريقة الاتصال سواء ايميل أو رقم واضافة صورة وتدع لي مربع للمعلومات الاضافية اكتب فيه ما اشاء .. طبعاً جميع هذه المعلومات تظهر في الموقع 
    4- اضافة خدمات : ستكون عبارة عن مربع اضغط فيه معلومات عن خدمات معين مختلفة بحيث انني لو اضفت خدمة معينة مثل (الضبغ او السباكة) اضع فيها الشركات التي تقوم بهذه الاعمال وتكون هذه الخدمات بقائمة خاصة فيها بالصفحة الرئيسية ..
    5- طبعاً كل ما تم اضافته لابد من طريقة للتعديل والحذف من لوحة التحكم


    ويكون لكم جزيل الشكر واسال الله التوفيق لكم ولى

    وكان الله فى عون الجميع

    واترككم فى حفظ الله

  3. #3
    MEG
    MEG غير متواجد حالياً
    عضو شرف
    تاريخ التسجيل
    20-02-2008
    المشاركات
    41
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    ^^^

    ما هي هذه الاخطاء ( ضعها هنا ) ؟

    بالنسبة للتعديل على السكربت ضع هنا ما تريد التعديل عليه لتعم الفائدة

    و في حال لم استطع افاتدك يفيدك غيري

  4. #4
    عضو شرف
    تاريخ التسجيل
    27-08-2008
    المشاركات
    8
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    اسف اخى الاخطاء كانت من التطبيق الخاص فينى

    هذا مثال السكربت

    لوحة تحكم الادمن

    اليوزر نيم : admin
    الباسورد : 123456

    وابى انى اضيف خاصية البحث كما الموجوده هنا

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

    ارجوا منك عن جد المساعدة وفى اسرع وقت
    التعديل الأخير تم بواسطة توشكى ; 27-08-2008 الساعة 07:44 PM

  5. #5
    عضو شرف
    تاريخ التسجيل
    12-09-2008
    المشاركات
    14
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    شكرا لك أخي الكريم

  6. #6
    عضو شرف
    تاريخ التسجيل
    20-10-2008
    المشاركات
    35
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    شكرا لك اخي فعلا شرح واضح ... نحو الامام

  7. #7
    عضو جديد
    تاريخ التسجيل
    16-05-2008
    المشاركات
    5
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    قرأت الكثير و تصفحت الكثير و لكن هناك شئ غامض بالنسبة لي وهو كيف أقوم باستخراج معلومات من الداتا بيس و تعرض على شكل select list
    و عند إختيار اي خيار يتم عرض select list أخرى
    و عند إختيار اي خيار من select list الثانية يتم عرض السعر على سبيل المثال .

    مثال :
    في القائمة الاولى أنواع السيارات مثلا ford - lexus - toyota
    و بعد اختيار اي نوع من السيارات يتم عرض اسماء السيارات التي تنتمي لنوع السيارة مثلا من toyota يتم إظهار camry - corola - VXR
    و عند إختيار اسم السيارة camry ، يتم عرض سعر في حقل input

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



  8. #8
    عضو مشارك
    تاريخ التسجيل
    06-08-2009
    المشاركات
    21
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    في القائمة الاولى أنواع السيارات مثلا ford - lexus - toyota
    و بعد اختيار اي نوع من السيارات يتم عرض اسماء السيارات التي تنتمي لنوع السيارة مثلا من toyota يتم إظهار camry - corola - VXR
    و عند إختيار اسم السيارة camry ، يتم عرض سعر في حقل input

    ما توصلت له إلى الان هو عرض السيارات بعد عرض انواع السيارات ، ارجو إفادتي بالمتبقي كما هو موضح أعلاه و لكم جزيل الشكر
    ..
    نفس السؤال ... حيث اني اريد اخذ قيمة من القائمة الاهخرى لتخزينها في القاعدة ولكن القيمة تظهر دائما فارغه فنأمل الحل

  9. #9
    عضو جديد
    تاريخ التسجيل
    03-08-2009
    المشاركات
    9
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    تسلم اخوي على الشرح

    وعندي سؤال
    في عملة الرسال المدخلات
    لو بدل القائمة المنسدلة صندوق نصي كيف راح يكون الكود

  10. #10
    عضو مشارك
    تاريخ التسجيل
    23-11-2008
    المشاركات
    27
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

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

    لا اعلم هل الموضوع قديم ام جديد

    عموما
    قمت بتطبيق المثال ونجح معي ولله الحمد

    ولكن اذا كنت اريد ان تكون قائمتين وليس قائمة في نفس الصفحة

    يعني
    المدينة --- الدولة
    مسمى الوظيفة ---- مدير ، موظف ... الخ

  11. #11
    عضو مشارك
    تاريخ التسجيل
    23-10-2009
    المشاركات
    11
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    درس جميل طبقته واشتغل اريد اضيف عليه بعض الميزات

    انشاء صفحه واحده القائمة الاولى تستدعى من قاعدة البيانات
    وتحتها القائمة الثانيه

    انا جربت ولكن طلعت بعض الاخطاء وهي ان القائمة الاولى تكررت مرتين <---------------- تجربه فاشله

    غيرت الصفحه منindex.html الى index.php

    كود PHP:
    <?php
             
    include ('config.php');
             echo
    "<form name='car'>
             <select size='1' name='make' onChange='getInfo()' >
             <option value='0'>select</option>"
    ;
             
    $sql5mysql_query(" select * from make order by id");
             while(
    $row=mysql_fetch_array($sql5)){
             echo
    "<option value ='$row[id]'>$row[name]</option>";
             }
             echo
    "</select></form>
            <div id='main'>"
    ;
            
    $id intval($_GET['id']);
            
    $sql "SELECT * FROM model WHERE make=$id";
            
    $result mysql_query($sql);
            echo 
    "<select name='model'>";
            echo 
    "<option value='0'>-- Select Model</option>";
            while ( 
    $row mysql_fetch_array($result) )
            {
                    echo 
    "<option value='{$row['id']}'>{$row['name']}</option>";
            }
            echo 
    "</select></div>";
    ?>

    في صفحة main.js
    غيرت رابط الفورم
    xmlHttp.open('get','index.php?id='+ document.car.make.selectedIndex);

  12. #12
    عضو مشارك
    تاريخ التسجيل
    23-10-2009
    المشاركات
    11
    معدل تقييم المستوى
    0

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    مبين ان الموضوع قديم راح انقل مشاركتي كموضوع جديد يبحث عن اجابه

  13. #13
    عضو مشارك
    تاريخ التسجيل
    31-01-2010
    المشاركات
    65
    معدل تقييم المستوى
    8

    افتراضي رد : تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    السلام عليكم
    درس واضح ومفهوم

  14. #14
    عضو شرف الصورة الرمزية ماهر الجميل
    تاريخ التسجيل
    10-10-2008
    السن
    29
    المشاركات
    603
    معدل تقييم المستوى
    10

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    والله أنا استفدت من هذا الدرس الذيذ البسيط الجميل
    ربنا يزيدك
    الخيل والليل والبيداء تعرفنى

  15. #15
    عضو شرف الصورة الرمزية Abu Rayane
    تاريخ التسجيل
    09-06-2008
    المشاركات
    2,727
    معدل تقييم المستوى
    12

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    هل هناك مثال لأكثر من قائمتين؟
    http://www.alfirdaous.com

    السلام عليكم ورحمة الله وبركاته،
    نبحث عن مساعدين (مصممين، مبرمجين، إدخال بيانات، كاتبي مقالات،...) في إدارة موقع الفردوس، لمن يهمه الأمر، المرجو الإتصال بالإدارة من هنا.

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

    I do not code for others
    I do not answer without codes
    I do not update the 3rd party codes
    All my codes bug, do not copy / paste them

  16. #16
    عضو مشارك
    تاريخ التسجيل
    25-10-2008
    المشاركات
    16
    معدل تقييم المستوى
    0

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    Thankssssssssssssssssssssssssssssssssssssssss

  17. #17
    عضو مشارك الصورة الرمزية Baxi
    تاريخ التسجيل
    18-02-2010
    المشاركات
    22
    معدل تقييم المستوى
    0

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    الله ينور المثال واضح جدا ونظيف لكن مفيش مثال لاكثر من قأئمتين ؟
    انا حاولت اعدل الكود بنفس الطريقة ولكن ما نفعت مستنى ردودكم
    شكرا

  18. #18
    عضو فعال
    تاريخ التسجيل
    27-11-2012
    المشاركات
    102
    معدل تقييم المستوى
    5

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    شكرا اخى الكريم ولكن
    الكود لا يعمل عندى وعندما اختار نوع الشركة لم يظهر لى قائمة الموديلات وانما يظهر لى كود الى اتش بى التالى
    "; echo ""; while ( $row = mysql_fetch_array($result) ) { echo "
    "; } echo ""; //mysql_free_result($result); //mysql_close($link); ?>

    وارجو ان يكون هناك مثال لاكثر من قائمة وان تكون جميع القوائم عناصرها من قاعدة البيانات


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

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    الأجاكس تستــخدم في الفيس بوك ؟؟ صح أو أنا غلطان

  20. #20
    مشرف منتدى مشاكل وحلول PHP الصورة الرمزية Mr.HELMY
    تاريخ التسجيل
    16-05-2011
    المشاركات
    1,108
    معدل تقييم المستوى
    8

    افتراضي رد: تبسيط تقنية الـ AJAX مع مثال تطبيقي ( قائمة تعتمد على قائمة )

    اقتباس المشاركة الأصلية كتبت بواسطة haitham مشاهدة المشاركة
    الأجاكس تستــخدم في الفيس بوك ؟؟ صح أو أنا غلطان
    صح^........

صفحة 1 من 2 12 الأخيرةالأخيرة

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

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

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

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

  1. ظهور قائمة منبثقة باختيار قيمة من قائمة أخرى
    بواسطة عبود طش أم طش في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 1
    آخر مشاركة: 05-09-2009, 01:12 PM
  2. قائمة معتمدة على قائمة آخرى أرجو الاهتمام
    بواسطة meshmesha07 في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 8
    آخر مشاركة: 24-05-2009, 12:44 AM
  3. كيف اعمل قائمة اعبيها من قاعدة بيانات وفق شرط يعتمد على قيمة من قائمة اخرى
    بواسطة shtayeman في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 1
    آخر مشاركة: 27-08-2008, 12:51 AM
  4. درس تطبيقي - قائمة تصويت
    بواسطة محب php في المنتدى دروس متقدمة
    مشاركات: 11
    آخر مشاركة: 24-03-2008, 09:38 PM
  5. عمل قائمة تنقل سريع قائمة الاختيار
    بواسطة Akwad Net في المنتدى لغة Javascript
    مشاركات: 11
    آخر مشاركة: 15-11-2007, 07:40 PM

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

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

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