ولنبدأ:
هناك ثلاث مستويات في المكتبة للتعامل مع الأجاكس:
- أولاً : load
- ثانياً : $.get و $.post
- ثالثا : $.ajax
الدالة load التعامل معها سهل جدا، حيث تستطيع جلب الملف كما هو (انظر المثال رقم 1)، وتستطيع أيضاً التعامل مع طريقة get (انظر مثال رقم 2)
مثال رقم 1
<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
$name="عبد الواحد البشيري<br />";
// مجرد مثال
for($i=0;$i<500;$i++){
echo $name."\n";
}
?>
مثال رقم 2$(document).ready(function(){
$("a").click(function(){
$("#contents").load("ajax.php?name=abdelouahid");
});
});
وصفحة ajax.php$name=$_GET['name']; echo $name;الدالة post و get متقدمة اكثر من الدالة السابقة
post التعامل معها عن طريق post
get عكس الدالة السابقة
طريقة post
<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$name=$_POST['name']; echo $name;$(”#name”).val() = القيمة التي تم ادخالها في الحقل
طريقة get
$(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
$name=$_GET['name']; echo $name;أما الدالة ajax فهي دالة شاملة تستطيع معها استخدام كلتا الحالتين السابقتين
post أو get
يمكن التعرف على كيفية استخدامها من خلال دليل الاستخدام بكل سهولة
وأخيراً أنصحكم بتصفح هذا الموقع http://visualjquery.com الذي يوجد فيه كل ما تود معرفته عن استخدام دوال المكتبة.
ولو أحببت أن يكون لديك دليل استخدام المكتبة في جهازك فتفضل دليل استخدام مكتبة jQuery.
وأي نقطة تود الاستفسار عنها فيما يتعلق بالدرس فأنا موجود إن شاء الله
أخيراً..
لن أعدكم بأي دروس مستقبلية لهذه المكتبة ولكن ربما أتطرق إلى بعض المتفرقات.
هذا وإن أخطأت فمن نفسي والشيطان وإن أصبت فمن الله..
والسلام عليكم ورحمة الله وبركاته.
المصدر jQuery
شكرا ا اخى عل المعلومات الجميلة
ردحذف