در این آموزش از AJAX با jQuery , نحوه اجرای عملیات CRUD دیتابیس با AJAX یا همان افزودن , حذف و بروزرسانی را در PHP خواهیم دید.
ما از هندلر جی کوئری برای ساخت و ارسال درخواست AJAX به سمت سرور به منظور انجام عملیات در دیتابیس MySQL , بهره می بریم. این هندلر وضعیت پاسخ را برگشت می دهد.
اگر به دنبال انجام عملیات روی دیتابیس بدون استفاده از AJAX هستید , آموزش اتصال به دیتابیس با mysqli در php را مطالعه کنید.
فرم AJAX برای ارسال درخواست
ما یک فرم برای داده های ورودی کاربر و انجام رویداد AJAX برای عملیات دیتابیس را داریم. این کد لیستی از سطر های جدول دیتابیس را نشان می دهد. همچنین یک گزینه “افزودن” را برای اضافه کردن سطر جدید با AJAX را دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="comment-list-box"> <?php if(!empty($comments)) { foreach($comments as $k=>$v) { ?> </p> <p>// display comments list <div class="message-box" id="message_<?php echo $comments[$k]["id"];?> "> <div> <button class="btnEditAction" name="edit" onClick="showEditBox(<?php echo $comments[$k]["id"]; ?>)">Edit</button> <button class="btnDeleteAction" name="delete" onClick="callCrudAction('delete',<?php echo $comments[$k]["id"]; ?>)">Delete</button> </div> <div class="message-content"> <?php echo $comments[$k]["message"]; ?> </div> </div> <?php }} ?> </div> <div id="frmAdd"> <textarea name="txtmessage" id="txtmessage" cols="80" rows="10"></textarea> <p> <button id="btnAddAction" name="submit" onClick="callCrudAction('add','')">Add Comment</button> </p> </div> |
همین که فرم ارسال شد , داده های فرم به صفحه php با استفاده از درخواست AJAX ارسال می شود . در صورت موفقیت آمیز بودن عملیات , لیست سطر ها بالای فرم مجددا بارگذاری می شوند.
عملیات CRUD دیتابیس با AJAX
در تابع ajax ما , ما از switch-case برای add,delete,edit داریم .هر یک از این case ها کوئری استرینگ و پاسخ های متفاوتی را بر اساس عملیات دیتابیس , ایجاد می کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
function callCrudAction(action,id) { $("#loaderIcon").show(); var queryString; switch(action) { case "add": queryString = 'action='+action+'&txtmessage='+ $("#txtmessage").val(); break; case "edit": queryString = 'action='+action+'&message_id='+ id + '&txtmessage='+ $("#txtmessage_"+id).val(); break; case "delete": queryString = 'action='+action+'&message_id='+ id; break;} jQuery.ajax({ url: "crud_action.php", data:queryString, type: "POST", success:function(data){ switch(action) { case "add": $("#comment-list-box").append(data); break; case "edit": $("#message_" + id + " .message-content").html(data); $('#frmAdd').show(); break; case "delete": $('#message_'+id).fadeOut(); break; } $("#txtmessage").val(''); $("#loaderIcon").hide(); }, });} |
اسکریپت PHP برای عملیات CRUD دیتابیس
کد php زیر , بعد از انجام عملیات بر روی دیتابیس , سطر بروزرسانی شده در دیتابیس را به عنوان پاسخ درخواست اجکس برگشت (return) می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
require_once("dbcontroller.php"); $db_handle = new DBController(); $action = $_POST["action"]; if(!empty($action)) { switch($action) { case "add": $result = mysql_query("INSERT INTO comment(message) VALUES('".$_POST["txtmessage"]."')"); if($result){ $insert_id = mysql_insert_id(); echo '<div class="message-box" id="message_' . $insert_id . '"> <div> <button class="btnEditAction" name="edit" onClick="showEditBox(' . $insert_id . ')">Edit</button> <button class="btnDeleteAction" name="delete" onClick="callCrudAction(\'delete\',' . $insert_id . ')">Delete</button> </div> <div class="message-content">' . $_POST["txtmessage"] . '</div></div>'; } break; case "edit": $result = mysql_query("UPDATE comment set message = '".$_POST["txtmessage"]."' WHERE id=".$_POST["message_id"]); if($result) echo $_POST["txtmessage"]; break; case "delete": if(!empty($_POST["message_id"])) { mysql_query("DELETE FROM comment WHERE id=".$_POST["message_id"]); } break;}} |
امیدوارم مقاله آموزشی انجام عملیات CRUD دیتابیس با AJAX برای شما مفید واقع شده باشد.
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید.
