السلام عليكم ورحمة الله
سنكمل مسيرتنا في دورة الاجاكس مع الدرس الثاني
بعد ان تعرفنا في الدرس الاول على
استعمال الاطر المخفية مع طلبات GET
سنتعلم اليوم
استعمال الاطر المخفية مع طلبات POST
افضل ما يميز طريقة ارسال البيانات POST عن GET انك يمكنك ارسال بيانات بحجم يقارب
2GB انما في طريقة GET فلا يمكنك ارسال سوا 512KB .
كما تعودنا فطريقة ارسال الطلبات بالPOST تتم من خلال form مع تعيين الmetod الى post
ومن ثم عند ارسال الطلب فأن الpost ترسل الى الurl الموجود في الخاصية action.
ومما زاد الامور تقعيدا ان المعلومات ترسل الى صفحة اخرى , ولكن هذا يتعارض مع مبدأ الاجاكس
ولكن شكرا للخاصية المسماه target .
الخاصية target هي واحده من خواص الفورم التي توضع مع الوسم <a> بوضعك لهذه الخاصية
يمكنك الطلب من الصفحة ان تعرض لك البيانات المراده في فريم اخر وفي هذا المجال سيكون اطار مخفي
لنبدأ الان بالعمل :
قم بفتح ملف جديد وضع به كود الhtml التالي
كود PHP:
<frameset rows="100%,0" frameborder="0">
<frame name="displayFrame" src="entry.htm" noresize="noresize" />
<frame name="hiddenFrame" src="about:blank" noresize="noresize" />
</frameset>
لاحظ انه لم يختلف عن مثالنا في درسنا الاول الا في السطر الثاني بحيث اردنا ان يفتح
صفحة جديدة اسميناها entry.htm
الان قم بوضع هذا الكود داخل هذه الصفحة ..
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html dir="rtl">
<head>
<title>اضافة عميل جديد </title>
<script type="text/javascript">
function saveResult(sMessage) {
var divStatus = document.getElementById("divStatus");
divStatus.innerHTML = "Request completed: " + sMessage;
}
</script>
</head>
<body>
<form method="post" action="SaveCustomer.php" target="hiddenFrame">
<p>اكتب معلومات العميل لحفظها :</p>
<p>اسم العميل: <input type="text" name="txtName" value="" /><br />
العنوان: <input type="text" name="txtAddress" value="" /><br />
المدينة: <input type="text" name="txtCity" value="" /><br />
الامارة: <input type="text" name="txtState" value="" /><br />
الرمز البريدي: <input type="text" name="txtZipCode" value="" /><br />
الهاتف: <input type="text" name="txtPhone" value="" /><br />
البريد الالكتروني: <input type="text" name="txtEmail" value="" /></p>
<p><input type="submit" value="حفظ معلومات العميل" /></p>
</form>
<div id="divStatus"></div>
</body>
</html>
من خلال الفورم الموجود امامنا قمنا بتعيين الtarget الى اطار مخفي اهم ما يميز هذه الصفحة
هي دالة الجافا سكريبت الموجوده فيه فهي تعمل عندما يعود الاطار المخفي بعد حفظ المعلومات
في صفحة savecustomer.php
لنأتي الان لعمل الصفحة SaveCustomer.php فهي ببساطه تقوم بحفظ البيانات المرسلة الليها
في قاعدة البيانات .
وهذا الكود الخاص بها وليس به ما هو جديد
كود PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Create New Customer</title>
<?php
//جلب البيانات
$sName = $_POST["txtName"];
$sAddress = $_POST["txtAddress"];
$sCity = $_POST["txtCity"];
$sState = $_POST["txtState"];
$sZipCode = $_POST["txtZipCode"];
$sPhone = $_POST["txtPhone"];
$sEmail = $_POST["txtEmail"];
//رسالة الحالة
$sStatus = "";
//معلومات قاعدة البيانات
$sDBServer = "localhost";
$sDBName = "ajax";
$sDBUsername = "root";
$sDBPassword = "";
//استفسارات قاعدة البيانات
$sSQL = "Insert into Customers(Name,Address,City,State,Zip,Phone,`E-mail`) ".
" values ('$sName','$sAddress','$sCity','$sState', '$sZipCode'".
", '$sPhone', '$sEmail')";
$oLink = mysql_connect($sDBServer,$sDBUsername,$sDBPassword);
@mysql_select_db($sDBName) or $sStatus = "Unable to open database";
if($sStatus == ''){
if($oResult = mysql_query($sSQL)) {
$sStatus = "Added customer; customer ID is ".mysql_insert_id();
} else {
$sStatus = "An error occurred while inserting; customer not saved.";
}
}
mysql_close($oLink);
?>
<script type="text/javascript">
window.onload = function () {
top.frames["displayFrame"].saveResult("<?php echo $sStatus ?>");
}
</script>
</head>
<body>
</body>
</html>
الدالة mysql_insert_id() عملها يقوم على اعادة اخر auto_increment تم اضافته من خلال
الـ insert
قم بعمل هذا المثال وتمتع بالنتائج ^^
لقلة الوقت سأكتفي بهذا المثال
اتمنى لكم الفائدة وفي دروسنا القادمة سنتعرف على Hidden iFrames
والسلام عليكم