در این برنامه یه لیست از دانشجوها داریم که قراره به وسیله ajax به این لیست اضافه کنیم .

برای هر دانشجو فیلدهای نام , نام خانوادگی , شماره دانشجویی رو در نظر می گیریم .

بانک اطلاعاتی به نام ajax و جدولی به نام students در ان ایجاد می کنیم و فیلدهای id,name,family,code رو برای ان می سازیم .

 

CREATE TABLE IF NOT EXISTS `students` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL,
`family` varchar(50) character set utf8 collate utf8_unicode_ci NOT NULL,
`code` int(11) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=9 ;

فایلی به نام index.php ایجاد می کنیم که شامل جدولی برای نمایش اطلاعات بانک اطلاعاتی و رکورد های اضافه شده به ان است و قسمتی شامل textfiled هایی برای اضافه کردن داده جدید به بانک .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ۱٫۰ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ADD BY AJAX </title>
</head><body><table id=’students’ width=”۲۰۰″ border=”۱″ dir=”rtl”>
<tr>
<td>نام </td>
<td>نام خانوادگی</td>
<td>شماره دانشجو</td>
</tr>
<?php
//اجاکس , ایجکس , اژاکس ,AJAX
$con=mysql_connect(‘localhost’,’root’,”);
$db=mysql_select_db(‘ajax’,$con);
mysql_query(“set names ‘utf8′”);
$q=”SELECT * FROM `students` “;
$query=mysql_query($q);
while($row=mysql_fetch_assoc($query))
{
$name=$row[‘name’];
$family=$row[‘family’];
$code=$row[‘code’];
echo ”    <tr>
<td>$name </td>
<td>$family</td>
<td>$code</td>
</tr>”;
}
?>
</table>

<table width=”۴۰۰″ border=”۰″>
<tr>
<td>نام</td>
<td><input type=”text” id=”name” /></td>
</tr>
<tr>
<td> نام خانوادگی</td>
<td><input type=”text” id=”family” /></td>
</tr>
<tr>
<td>شماره دانشجویی</td>
<td><input type=”text” id=”code” /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type=”button” value=”ارسال” onclick=”sendToServer()”/></td>
</tr>
</table>

</body>
</html>

 

در ابتدای اجرا صفحه جدولی شامل سه ستون رسم میشه و با اتصال به بانک اطلاعاتی اطلاعات واکشی شده و در جدول قرار میگیره .
در زیر این جدول قسمتی داریم برای وارد کردن اطلاعات که پس از وارد کردن اطلاعات و کلیک روی دکمه ارسال رویداد onclick دکمه اجرا شده و تابع sendToServer فراخوانی میشود این تابع وظیفه ارسال اطلاعات به سرور رو بر عهده داره.