السلام عليكم ،
بمناسبة إنتهاء الإمتحانات، قررت أن أكتب درس بسيط جداً يشرح التعامل مع مكتبة 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 هو المفتاح للمصفوفة POST كما قلت لكم و ال Send هي القيمة المختارة من القائمة المنسدلة .
ماذا لو أردنا إرسال أكثر من قيمة واحدة ؟ لامشكلة الحل سهل :
كود:
"sData="+Send+"&newdata="+newdata,
هذه هي الفكرة العامة،الآن نأتي للحدث beforeSend وهنا من أجل القيام بأشياء معينة قبل إرسال البيانات، وفي مثالنا فقط قمنا بوضع كلمة جاري التحميل في الـ div الذي سيعرض لنا المعلومات، الآن نأتي للحدث success وهنا في حالة نجاح الإتصال مع الصفحة المطلوبة سنعود بقيم منها(هذا المفروض 
) والقيم هي التي حددناها في الصفحة الثالثة ، لذا قلنا له أنه في حالة النجاح نأخذ النتائج بمتغير سميناه result ويمكننا تسميته مانشاء ومن ثم ضع المعلومات التي حصلت عليها من الصفحة الثالثة في الـ div نفسه.
الآن نأتي لشرح الـ body :
قائمة منسدلة تحتوي على ٣ قيم ، و زر عند الضغط عليه نستدعي الدالة getData التي عرّفناها مسبقاً ، و من ثم div بمعّرف info لكي نعرض فيه المعلومات .
هذا كل شيء ، وأي استفسار أنا جاهز بإذن الله.
و أتمنى أن تقترحوا علي دروس لكي أكتبها لكم .
LinkBack URL
About LinkBacks
[Jquery] إستخدام Ajax مع PHP
رد مع اقتباس
