البرمجة

الأجاكس في jQuery

خالد الحوراني أرسل بريدا إلكترونيا 16 مايو 2009آخر تحديث: 24 مايو 2009
دقيقة واحدة

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

مثال بسيط موجود لدي أحببت أن أشارككم به وهو مثال لعملية جمع بسيطة باستخدام مكتبة jQuery وتقنية الأجاكس.

ملاحظة: يجب تشغيل الملفات داخل المخدم المحلي لأنها تحتوي على صفحات PHP أما الأجاكس لوحدها فلاتحتاج لأي سيرفر لأنها تعتمد على الجافاسكربت و XML.

صفحة (index.php)

<code>
<html>
<head>
    <script src="jquery.js"></script>
    <script language="javascript">
        $(function(){
            $("#add").click(function(){
                $.post("calc.php", { x: $("#x").val(), y: $("#y").val() },
                  function(data){
                    $("#result").append("The result: " + data);
                  });
            });
        });
    </script>
</head>
<body>
    <form action="calc.php" method="post">
        <input type="text" id="x" name="x"><br/>
        <input type="text" id="y" name="y"><br/>
        <input type="submit" value="Normal Add"><br/>
        <input type="button" id="add" value="Ajax Add"><br/>
    </form>
    <div id="result"></div>
</body>
</html>
</code>

بالتأكيد ملف jQuery يجب أن يكون موجود في نفس مسار هذه الصفحة (هكذا حددناه في السطر الثالث)، بكل بساطة تقوم باستدعاء تابع post.$ الموجود في مكتبة jQuery والذي يقوم بتغليف تابع الأجاكس التلقيدي بحيث يريحك من الاستثناءات كمتصفح IE، ونقوم بتمرير ثلاثة وسائط للتابع هم مسار واسم الصفحة التي سيرسل لها البيانات وسيأخذ منها النتائج، الثاني هي مجموعة المتحولات والتي يجب أن تكون بنفس اسم المتحولات في الصفحة التي ستقوم بالحساب (calc.php)، أما الثالث فهو تابع يستقبل وسيط واحد هو النتيجة التي جاءتنا من تلك الصفحة حيث نقوم بطباعة هذه النتيجة داخل div المسماة result.

أما الصفحة التي تقوم بالحساب (calc.php):

</code>
<?php
$x = $_POST['x'];
$y = $_POST['y'];
echo $x + $y;
?>
</code>

حمل ملف المثال:

الوسوم
خالد الحوراني أرسل بريدا إلكترونيا 16 مايو 2009آخر تحديث: 24 مايو 2009
دقيقة واحدة

‫3 تعليقات

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى