الأجاكس في jQuery
السلام عليكم،
مثال بسيط موجود لدي أحببت أن أشارككم به وهو مثال لعملية جمع بسيطة باستخدام مكتبة jQuery وتقنية الأجاكس.
ملاحظة: يجب تشغيل الملفات داخل المخدم المحلي لأنها تحتوي على صفحات PHP أما الأجاكس لوحدها فلاتحتاج لأي سيرفر لأنها تعتمد على الجافاسكربت و XML.
صفحة (index.php)
<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>
بالتأكيد ملف jQuery يجب أن يكون موجود في نفس مسار هذه الصفحة (هكذا حددناه في السطر الثالث)، بكل بساطة تقوم باستدعاء تابع post.$ الموجود في مكتبة jQuery والذي يقوم بتغليف تابع الأجاكس التلقيدي بحيث يريحك من الاستثناءات كمتصفح IE، ونقوم بتمرير ثلاثة وسائط للتابع هم مسار واسم الصفحة التي سيرسل لها البيانات وسيأخذ منها النتائج، الثاني هي مجموعة المتحولات والتي يجب أن تكون بنفس اسم المتحولات في الصفحة التي ستقوم بالحساب (calc.php)، أما الثالث فهو تابع يستقبل وسيط واحد هو النتيجة التي جاءتنا من تلك الصفحة حيث نقوم بطباعة هذه النتيجة داخل div المسماة result.
أما الصفحة التي تقوم بالحساب (calc.php):
<?php $x = $_POST['x']; $y = $_POST['y']; echo $x + $y; ?>
حمل ملف المثال:
Calc (401)
Loading ...
درس بسيط لكنه ممتع
شكرا لك أخى خالد …
احلى شي بالjquery انو كودها قصير ومفعوله كبير.
شكراً خالد,
سلام.