آموزش مقدماتی ایجکس Ajax

محتوا

1 آموزش Ajax مقدماتی قسمت اول

آموزش Ajax مقدماتی قسمت اول

Ajax چیست ؟

Ajax مخفف Asynchronous JavaScript and XML می‌باشد.
Ajax یک زبان برنامه نویسی نیست، ajax یک تکنیک برای بروز رسانی و نمایش داده‌ها است بدون اینکه صفحه وب ما رفرش شود. Ajax ترکیبی از xml و javascript است. همین طور می‌توانیم با استفاده از ajax داده‌ها را از دیتابیس بگیریم.
برای شروع ابتدا باید xampp را روی سیستم خود نصب کنید، بعد از نصب به پوشه htdocs رفته و یک پوشه با نام دلخواه ایجاد کنید، من نام پوشه را Ajax می‌گذارم. سپس داخل آن فایلی به نام index.html ایجاد می‌کنید، حال درون این فایل کدهای ابتدایی برای ساخت یک صفحه html را می‌نویسیم.

سپس تگ script ایجاد می‌کنیم تا داخل آن اولین کد ajax خود را بنویسیم، همچنین یک فایل php به نام darkoobweb.php نیز در همان محل می‌سازیم. این فایل php فقط Hello Ajax را چاپ می‌کند.
ابتدا باید یک آبجک جدید از XMLHttpRequest() ایجاد کنیم .

var xmlHttpReq = new XMLHttpRequest();

این آبجکت دارای متدهایی است، که دو متد آن برای ما از همه مهم‌تر است. open و send، در open مشخص می‌کنیم درخواست ما با چه متدی GET یا POST به چه آدرسی و به صورت Asynchronous یا Synchronous فرستاده شود و send درخواست را ارسال می‌کند.
فرق synchronous و asynchronous در چیست؟ و به چه شکل باید این موضوع را در ajax مشخص کنیم ؟
فرق این دو در این است که اگر Asynchronous باشد، منتظر دریافت پاسخ از سرور نمی‌شود و بقیه کدها و کارهای مورد نظر را اجرا می‌کند و هر زمان که پاسخ از سمت سرور ارسال شود از آن استفاده خواهد کرد، در واقع کاربر را در انتظار پاسخ نگه نمی‌دارد .
اما در Synchronous در خواست به سرور فرستاده می‌شود و کاربر باید منتظر پاسخ از سمت سرور بماند. در این هنگام کاربر نمی‌تواند به فعالیت خود ادامه دهد تا زمانی که پاسخ از سمت سرور به کلاینت ارسال شود.
حال چگونه این دو حالت را در Ajax مشخص می‌کنیم ؟

با استفاده از ture به منظور Asynchoronus و false به منظور Synchronous.
من در این مثال از true یعنی Asynchoronus استفاده می‌کنم .

xmlHttpReq.open(‘GET’,’darkoobwe.php’,true);

سپس در خواست را ارسال می‌کنیم:

xmlHttpReq.send();

برای اجرا شدن این دستورات در index.html یک دکمه ایجاد می‌کنیم که موقع کلیک شدن برروی آن فانکشن ajaxFunction را اجرا کند، تمام کدهایی که نوشتیم را درون این فانکشن قرار می‌دهیم.
سپس به محلی برای نمایش داده‌ها نیاز داریم پس یک تگ p ایجاد کرده و به آن آی دی placeForAjax را میدهیم، تا هنگام دریافت اطلاعات آن را در تگ p خود نمایش دهیم .

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Ajax</title>
 <script>

 function ajaxFunction() {

 var xmlHttpReq = new XMLHttpRequest();

 xmlHttpReq.open('GET', 'darkoobweb.php',true);
 xmlHttpReq.send();

 }

 </script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>
<p id="placeForAjax"></p>
<button onclick="ajaxFunction();">Click me to see ajax</button>

</body>
</html>

درخواست را فرستادیم حالا باید داده یا داده‌های مورد نظر را بگیریم، برای این کار از متد onreadystatechange استفاده می‌کنیم، و چک می‌کنم اگر readyState = 4 و =200 status بود آنگاه با استفاده از responseText اطلاعات در تگ p قرار بگیرد.

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Ajax</title>
 <script>

 function ajaxFunction() {

 var xmlHttpReq = new XMLHttpRequest();

 xmlHttpReq.onreadystatechange = function () {

 if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

 document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText ;

 }

 };

 xmlHttpReq.open('GET', 'darkoobweb.php', true);
 xmlHttpReq.send();

 }

 </script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>
<p id="placeForAjax"></p>
<button onclick="ajaxFunction();">Click me to see ajax</button>

</body>
</html>

readyState پراپرتی است که مقدار status مربوط به XMLHttpRequest را نگه می‌دارد.
onreadystatechange پراپرتی است که به آن یک فانکشن می‌دهیم هر گاه readyState تغییر کند آن فانکشن اجرا می‌شود .
readyState می تواند دارای :
0: request not initialized
1:server connection established
2:request received
3:processing request
4:request finished and response is ready
باشد
Status می تواند دارای:
200: ok
403: forbidden
404 : page not found
500: server error
باشد.
روی دکمه کلیک کنید باید پیغامی مشابه پیغام زیر ببینید .

چه اطلاعاتی را و به چه شکلی Ajax می‌تواند دریافت کنید، خوب مت درون فایل darkoobweb.php تغییراتی ایجاد می‌کنیم.

یک آرایه ایجاد می‌کنیم سپس محتوای آرایه را با foreach درون یک تگ p که دارای کلاس myfriend است قرار می‌دهیم .
هم چنین در index.html به جای تگ p یک تگ div قرار می‌دهیم، حالا صفحه را رفرش کنید می‌بینید که تمام اطلاعات ما به نمایش در می‌آید .

<?php

echo '<p>Hello Ajax</p>';
echo '<p>I come from darkoobweb.php </p>';

$myFriends = array('Hooman', 'Hamdam', 'Shabbo', 'Nima', 'Ashkan');

foreach ($myFriends as $friend) {
 echo '<p class="myFriend">'.$friend . '</p>';
}

ارسال داده به واسطه Ajax

می‌توانیم مقادیری را به واسطه Ajax برای صفحه php خود ارسال کنیم، اما به چه صورت؟

می‌توانیم از کویری استرینگ پارامتر استفاده کنیم. پارامتری به نام، name را به darkoobweb.php ارسال می‌کنیم، در darkoobweb.php چک می‌کنیم، اگر پارامتر ست شده بود و اگر خالی نبود، چک کن اگر نام دریافتی ما با یکی از نام‌های درون آرایه برابر بود رنگ آن ار تغییر بده.
به این شکل
Index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction() {

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name=Hamdam', true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<div id="placeForAjax"></div>

<button onclick="ajaxFunction();">Click me to see ajax</button>

</body>
</html>

Darkoobweb.php

<?php

echo '<p>Hello Ajax</p>';
echo '<p>I come from darkoobweb.php </p>';

$myFriends = array('Hooman', 'Hamdam', 'Shabbo', 'Nima', 'Ashkan');

if (isset($_REQUEST['name']) && !$_REQUEST == '') {

foreach ($myFriends as $friend) {

if ($_REQUEST['name'] == $friend) {
echo '<p class="myFriend" style="color:slateblue;">' . $friend . '</p>';
} else {
echo '<p class="myFriend">' . $friend . '</p>';
}
}

echo 'This is our name from ajax = ' . $_REQUEST['name'];
} else {
echo 'Your value is not set or empty';
}

یک input ایجاد می‌کنیم تا کاربر نام دلخواه خود را داخل آن بنویسد و وقتی نوشتن تمام شد اگر آن نام در آرایه ما وجود داشت با رنگ متفاوتی چاپ شود.
Darkoobweb.php

<?php
$myFriends = array('Hooman', 'Hamdam', 'Shabbo', 'Nima', 'Ashkan');

if (isset($_REQUEST['name']) && !$_REQUEST == '') {

foreach ($myFriends as $friend) {

if ($_REQUEST['name'] == $friend) {
echo '<p class="myFriend" style="color:slateblue;">I found ' . $friend . '</p>';
}
}

echo 'This is our name from ajax = ' . $_REQUEST['name'];
} else {
echo 'Your value is not set or empty';
}

Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction() {

var xmlHttpReq = new XMLHttpRequest();

var nameFromUser = document.getElementById('name').value;

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name='+nameFromUser, true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<button onclick="ajaxFunction();">Click me to see ajax</button>
<input type="text" id="name" value="" onkeyup="ajaxFunction();">

<div id="placeForAjax"></div>

</body>
</html>

به شکل بهتری هم می‌توانیم بنویسیم، چطور؟ از this استفاده کنیم .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax</title>
<script>

function ajaxFunction(value) {

var xmlHttpReq = new XMLHttpRequest();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

document.getElementById('placeForAjax').innerHTML = xmlHttpReq.responseText;

}
};

xmlHttpReq.open('GET', 'darkoobweb.php?name='+value, true);
xmlHttpReq.send();
}

</script>
</head>
<body>

<h2>Darkoob web Ajax tutorial</h2>

<button onclick="ajaxFunction();">Click me to see ajax</button>
<input type="text" value="" onkeyup="ajaxFunction(this.value);">

<div id="placeForAjax"></div>

</body>
</html>

ایجاد پروژه با Ajax و BootStrap :

شما چیزهای زیادی آموختید، حال با هم یک پروژه Ajax ایجاد خواهیم کرد، پروژه‌ای برای ثبت کارمندان دارکوب وب
ابتدا پوشه‌ای به نام darkoobwebAjax در پوشه-> htdocs زمپ ایجاد می‌کنیم، سپس bootstrap و jquery را دانلود کرده و در این پوشه قرار می‌دهم، فایلی به نام index.html ایجاد کرده و یک فرم در آن می‌سازیم.
Index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>School record whit Ajax</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>

</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>Darkoobweb employee</h1>
</div>
<!--Start form-->
<div class="form-horizontal">

<div class="form-group">
<label class="control-label col-md-2">Employee Name</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2">Employee Work</label>
<div class="col-md-3">
<select class="form-control">
<option>Web Designer</option>
<option>Programmer</option>
<option>Manager</option>
<option>Accountants</option>
</select>
</div>
<label class="control-label col-md-2">Employee wages</label>
<div class="col-md-3">
<input type="number" class="form-control">
</div>
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-danger btn-block">Add new record</button>
</div>
</div>
<!--End of from-->
</div>

</body>
</html>

شما بیاید چنین فرمی داشته باشید :

حالا نوبت ساخت یک جدول است .

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>School record whit Ajax</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>

</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>Darkoobweb employee</h1>
</div>
<!--Start form-->
<div class="form-horizontal">

<div class="form-group">
<label class="control-label col-md-2">Employee Name</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2">Employee Work</label>
<div class="col-md-3">
<select class="form-control">
<option>Web Designer</option>
<option>Programmer</option>
<option>Manager</option>
<option>Accountants</option>
</select>
</div>
<label class="control-label col-md-2">Employee wages</label>
<div class="col-md-3">
<input type="number" class="form-control">
</div>
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-danger btn-block">Add new record</button>
</div>
</div>
<!--End of from-->
</div>
<!--Start table-->

<table class="table table-striped">
<thead>
<tr class="success">
<th>id</th>
<th>Employee Name</th>
<th>Employee Work</th>
<th>Employee Wages</th>
<th>Actions</th>
</tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>Pouria</td>
<td>Programmer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>

<tr>
<td>2</td>
<td>Hooman</td>
<td>Web Designer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

<!--End of table-->

</div>

</body>
</html>

همان طور که دید من به صورت دستی دو نفر را در جدول اضافه کردم.

فقط برای اینکه ببینیم چطور فرم ما نمایش داده می‌شود. اما قرار است اطلاعات از یک دیتابیس خوانده شود، بنابر این دیتابیس را نیز با هم ایجاد خواهیم کرد.
به آدرس localhost/phpmyadmin رفته و یک دیتابیس با نام دلخواه ایجاد کنید من نام دیتابیس خود را darkoobweb_employee گذاشتم.

می‌بینید که دیتابیس را ایجاد شده، هم چنین جدولی به نام employee ساخته و یک رکورد در آن وارد شده است.

در قسمت قبل دیتابیس را با هم ایجاد کردیم اکنون یوزری به نام Pouria با پسودر ajax می‌سازیم .

همان طور که در تصویر بالا می‌بینید یوزر مورد نظر من ایجاد شده است .
حال به یک صفحه php نیاز داریم، البته می‌توانید به جای php از زبان های دیگر نیز استفاده کنید، صفحه php به نام employeeData.php می‌سازیم سپس درخواستی به وسیله ajax به این صفحه ارسال می‌کنیم، ابتدا برای امتحان کردن صفحه php متن ساده‌ای را چاپ خواهیم کرد با عنوان : کارت خوب بود پیام دریافت کردی.
employeeData.php

<?php

echo 'good job you receive the message';

در صفحه index.html نیز بین فرم و تیبل تگ div ایجاد می‌کنیم تا پیام دریافتی را نمایش دهیم، این موارد فقط برای تست است‌، در ادامه این div را حذف خواهیم کرد. هم چنین رویداد onclick را برای دکمه add new record می‌نویسیم و در آن فانکشن ajaxRequest را فراخوانی می‌کنیم .
Index.html :

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>School record whit Ajax</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>

function ajaxRequest() {

var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.onreadystatechange = function () {

if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {

document.getElementById("test").innerHTML = xmlHttpRequest.responseText;

}

};

xmlHttpRequest.open("GET", "employeeData.php", true);
xmlHttpRequest.send();

}

</script>

</head>
<body>

<div class="container">
<div class="jumbotron">
<h1>Darkoobweb employee</h1>
</div>
<!--Start form-->
<div class="form-horizontal">

<div class="form-group">
<label class="control-label col-md-2">Employee Name</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2">Employee Work</label>
<div class="col-md-3">
<select class="form-control">
<option>Web Designer</option>
<option>Programmer</option>
<option>Manager</option>
<option>Accountants</option>
</select>
</div>
<label class="control-label col-md-2">Employee wages</label>
<div class="col-md-3">
<input type="number" class="form-control">
</div>
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-danger btn-block" onclick="ajaxRequest();">Add new record</button>
</div>
</div>

</div>
<!--End of from-->
<div id="test"></div>
<!--Start table-->

<table class="table table-striped">
<thead>
<tr class="success">
<th>id</th>
<th>Employee Name</th>
<th>Employee Work</th>
<th>Employee Wages</th>
<th>Actions</th>
</tr>
</thead>

<tbody>
<tr>
<td>1</td>
<td>Pouria</td>
<td>Programmer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>

<tr>
<td>2</td>
<td>Hooman</td>
<td>Web Designer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>

<!--End of table-->

</div>

</body>
</html>

صفحه را رفرش کنید، بعد از زدن دکمه add new record باید پیامی مانند پیام زیر را ببینید.

خوب همه چیز مرتب است، برای اتصال به دیتابیس به کانکشن نیاز داریم، با هم آن را ایجاد خواهیم کرد .
فایلی به نام dbConnection.php می‌سازیم و درآن کدهای مربوط به اتصال دیتابیس را قرار می‌دهیم .
dbConnection.php

<?php

$server = 'localhost';
$dbUserName = 'pouria';
$dbPassword = 'ajax';
$db = 'darkoobweb_employee';

$connection = mysqli_connect($server, $dbUserName, $dbPassword, $db);

باید چند تغییر کوچک در index.html ایجاد کنیم، اول تمام تگ‌های tr در تگ tbody جدول را به فایل employee.php منتقل کنیم، سپس آیدی test را به tbody بدهیم، رویداد onclick را از add new record حذف کنیم و به جای آن رویداد، در body رویداد onload را ایجاد کرده و فانکشن ajaxRequest را فراخوانی کنیم .
Index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>School record whit Ajax</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>

<script>

function ajaxRequest() {

var xmlHttpRequest = new XMLHttpRequest();

xmlHttpRequest.onreadystatechange = function () {

if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {

document.getElementById("test").innerHTML = xmlHttpRequest.responseText;

}

};

xmlHttpRequest.open("GET", "employeeData.php", true);
xmlHttpRequest.send();

}

</script>

</head>
<body onload="ajaxRequest();">

<div class="container">
<div class="jumbotron">
<h1>Darkoobweb employee</h1>
</div>
<!--Start form-->
<div class="form-horizontal">

<div class="form-group">
<label class="control-label col-md-2">Employee Name</label>
<div class="col-md-8">
<input type="text" class="form-control">
</div>
</div>

<div class="form-group">
<label class="control-label col-md-2">Employee Work</label>
<div class="col-md-3">
<select class="form-control">
<option>Web Designer</option>
<option>Programmer</option>
<option>Manager</option>
<option>Accountants</option>
</select>
</div>
<label class="control-label col-md-2">Employee wages</label>
<div class="col-md-3">
<input type="number" class="form-control">
</div>
</div>

<div class="form-group">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-danger btn-block">Add new record</button>
</div>
</div>

</div>
<!--End of from-->

<!--Start table-->

<table class="table table-striped">
<thead>
<tr class="success">
<th>id</th>
<th>Employee Name</th>
<th>Employee Work</th>
<th>Employee Wages</th>
<th>Actions</th>
</tr>
</thead>

<tbody id="test">

</tbody>

</table>

<!--End of table-->

</div>

</body>
</html>

Employee.php

<?php
include ('dbConnection.php');

?>
<tr>
<td>1</td>
<td>Pouria</td>
<td>Programmer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>

<tr>
<td>2</td>
<td>Hooman</td>
<td>Web Designer</td>
<td>1,000,000</td>
<td>
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Edit</a></li>
<li><a href="#">Delete</a></li>
</ul>
</div>
</td>
</tr>

صفحه را رفرش کنید، همه چیز باید به درستی نمایش داده شود.

حال زمان آن است که داده‌ها را از دیتابیس بگیریم، برای این کار باید کویری بنویسیم.

کویری که تمام اطلاعات جدول employee را بگیرد سپس آنها را با یک حلقه while در جایگاه‌های خود برای نمایش قرار دهد، اگر به یاد داشته باشید وقتی جدول را ساختیم من فردی به نام Pouria را داخل آن ایجاد کردم .
Employee.php

<?php
include('dbConnection.php');

$query = "SELECT * FROM employee";
$run = mysqli_query($connection, $query);


$counter = 1;

while ($row = mysqli_fetch_assoc($run)) {
 ?>
 <tr>
 <td><?php echo $counter; ?></td>
 <td><?php echo $row['employeeName']; ?></td>
 <td><?php echo $row['employeeWork']; ?></td>
 <td><?php echo $row['employeeWages']; ?></td>
 <td>
 <div class="dropdown">
 <button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">Edit</a></li>
 <li><a href="#">Delete</a></li>
 </ul>
 </div>
 </td>
 </tr>

 <?php
 $counter++;
}
?>

خوب صفحه را رفرش کنید باید اطلاعات جدول برای شما به نمایش درآید، من فعلا فقط یک داده به نام پوریا دارم .

نوبت نوشتن insert,update,delete است، ابتدا نیاز داریم بدانیم کدام دکمه کلیک شده است، دکمه‌ای که کار آن اضافه کردن حذف کردن و یا ویرایش کردن است. سپس باید بدانیم اگر حذف یا ویرایش کلیک شده است کدام id باید حذف یا ویرایش شود، هم چنین برای ویرایش من فایلی به نام employee.php ایجاد کرده‌ام که در آن یک فرم دیگر وجود دارد، برای استفاده از این فرم نیز دو فانکشن ایجاد کردام یکی برای فرم دیفالت و دیگری برای فرم ویرایش .
برای انجام کارهای بالا فانکشن ajaxRequest باید سه پارامتر دریافت کند، یکی id و دیگری یک رشته تا بدانیم کدام دکمه کلیک شده است و سومی فانکشن مورد نظر ما.
من نام این سه را getValue و getId وwhichFuntion می‌گذارم، در دکمه add new record رویداد onclick را ایجاد کرده فانکشن ajaxRequest(‘insert’,null,defualtFunction) را فراخوانی می‌کنم .
حال باید درون فانکشن مقادیر input ها را بگیرم، سپس چک کنم اگر مقدار getValue برابر insert بود مقادیر input ها را چک کن تا خالی نباشند، سپس اگر خالی بودند پیغام خطا و اگر پر بودند داده‌ها را به employeeData.php ارسال کن، هم چنین باید چک کنم مقدار getValue اگر delete بود شماره id و اگر update بود شماره id و مقادیر جدید را به employeeData.php ارسال کند، در employeeData.php نیز ابتدا چک می‎کنم اگر value مقدار داشت و مقدار آن delete update یا insert بود کارهای مربوط به هر کدام را انجام دهد.
خوب متوجه شدید روند کار به چه صورت است، حال کدها را ببینیم.
Index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>School record whit Ajax</title>
 <link rel="stylesheet" href="css/bootstrap.css">
 <script src="js/jquery-3.1.1.min.js"></script>
 <script src="js/bootstrap.js"></script>

 <script>
 var xmlHttpRequest = new XMLHttpRequest();

 var empName = document.getElementById("emName").value,
 empWork = document.getElementById("emWork").value,
 empWages = document.getElementById("emWages").value,
 url = "";

 function ajaxRequest(getValue, getId, whichFunction) {

 if (getValue == "insert") {

 if (empName == "" || empWork == "" || empWork == "select any" || empWages == "") {

 url = "employeeData.php";
 alert("some thing wrong");

 } else {
 url = "employeeData.php?value=" + getValue + "&name=" + empName + "&work=" + empWork + "&wages=" + empWages;
 }
 } else if (getValue == "delete") {

 url = "employeeData.php?value=" + getValue + "&id=" + getId;

 } else if (getValue == "edit") {

 url = "employeeEdit.php?value=" + getValue + "&id=" + getId;

 } else if (getValue == "editDone") {

 var empEdName = document.getElementById("emEdName").value,
 empEdWork = document.getElementById("emEdWork").value,
 empEdWages = document.getElementById("emEdWages").value;
 if (empEdName == "" || empEdWork == "" || empEdWork == "select any" || empEdWages == "") {

 url = "employeeEdit.php?value=" + getValue + "&id=" + getId;
 alert("some thing wrong");

 } else {

 url = "employeeEdit.php?value=" + getValue + "&edId=" + getId + "&edName=" + empEdName + "&edWork=" + empEdWork + "&edWages=" + empEdWages;

 }

 } else {
 url = "employeeData.php";
 }

 xmlHttpRequest.onreadystatechange = function () {

 if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
 whichFunction();
 }

 };

 xmlHttpRequest.open("GET", url, true);
 xmlHttpRequest.send();
 }

 function defaultFunction() {

 document.getElementById("test").innerHTML = xmlHttpRequest.responseText;

 }

 function editFunction() {

 document.getElementById("myFrom").innerHTML = xmlHttpRequest.responseText;

 }


 </script>

</head>
<body onload="ajaxRequest(null,null,defaultFunction);">

<div class="container">
 <div class="jumbotron">
 <h1>Darkoobweb employee</h1>
 </div>
 <!--Start form-->
 <div class="form-horizontal" id="myFrom">

 <div class="form-group">
 <label class="control-label col-md-2">Employee Name</label>
 <div class="col-md-8">
 <input type="text" id="emName" class="form-control">
 </div>
 </div>

 <div class="form-group">
 <label class="control-label col-md-2">Employee Work</label>
 <div class="col-md-3">
 <select class="form-control" id="emWork">
 <option value="select any" selected>Select Work</option>
 <option value="web designer">Web Designer</option>
 <option value="programmer">Programmer</option>
 <option value="manager">Manager</option>
 <option value="accountants">Accountants</option>
 </select>
 </div>
 <label class="control-label col-md-2">Employee wages</label>
 <div class="col-md-3">
 <input type="number" class="form-control" id="emWages">
 </div>
 </div>

 <div class="form-group">
 <div class="col-md-8 col-md-offset-2">
 <button class="btn btn-danger btn-block" onclick="ajaxRequest('insert',null,defaultFunction);">Add new
 record
 </button>
 </div>
 </div>

 </div>
 <!--End of from-->

 <!--Start table-->

 <table class="table table-striped">
 <thead>
 <tr class="success">
 <th>id</th>
 <th>Employee Name</th>
 <th>Employee Work</th>
 <th>Employee Wages</th>
 <th>Actions</th>
 </tr>
 </thead>

 <tbody id="test">

 </tbody>

 </table>

 <!--End of table-->

</div>

</body>
</html>

employeeData.php

<?php
include('dbConnection.php');


if (isset($_REQUEST['value']) && $_REQUEST['value'] == 'insert') {

 $name = $_REQUEST['name'];
 $work = $_REQUEST['work'];
 $wages = $_REQUEST['wages'];

 $query = "INSERT INTO employee (employeeName,employeeWork,employeeWages) VALUE ('{$name}','{$work}',{$wages})";
 $run = mysqli_query($connection, $query);

} elseif (isset($_REQUEST['value']) && $_REQUEST['value'] == 'delete') {

 $id = $_REQUEST['id'];
 $query = "DELETE FROM employee WHERE id = {$id}";

 $run = mysqli_query($connection, $query);

}

$query = "SELECT * FROM employee";
$run = mysqli_query($connection, $query);


$counter = 1;

while ($row = mysqli_fetch_assoc($run)) {
 ?>
 <tr>
 <td><?php echo $counter; ?></td>
 <td><?php echo $row['employeeName']; ?></td>
 <td><?php echo $row['employeeWork']; ?></td>
 <td><?php echo $row['employeeWages']; ?></td>
 <td>
 <div class="dropdown">
 <button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="javascript:void(0)" onclick="ajaxRequest('edit',<?php echo $row['id']; ?>,editFunction);">Edit</a></li>
 <li><a href="javascript:void(0)" onclick="ajaxRequest('delete',<?php echo $row['id']; ?>,defaultFunction);">Delete</a></li>
 </ul>
 </div>
 </td>
 </tr>

 <?php
 $counter++;
}

دیدگاهتان را بنویسید لغو پاسخ

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

آموزش Ajax مقدماتی قسمت اول

Ajax چیست ؟

ارسال داده به واسطه Ajax

ایجاد پروژه با Ajax و BootStrap :

دیدگاهتان را بنویسید لغو پاسخ

دارکوب وب

۰۹۳۸۶۵۶۰۲۰۰