Бортовой журнал Ктулху

PHP AJAX CRUD: создание, удаление, редактирование записей в БД MySQL

В этой статье мы узнаем о том, как добавлять, редактировать и удалять записи в базе данных MySQL, используя PHP. Мы использовали обработчик JQuery, который посылает AJAX запрос к серверному скрипту. Обработчик обновляет список записей.

 

AJAX форма для отправки запросов на создание, удаление, редактирование

<!--
<div id="comment-list-box">
  <?php
    if(!empty($comments)) {
        foreach($comments as $k=>$v) { ?>
        // 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 запрос. В случае успешного добавления список записей перезагружается.

 

JQuery AJAX функции для запроса к базе данных CRUD

В функции JQuery AJAX у нас есть переключатель случаи добавить редактировать и удалять. Эти случаи генерирует различные строки запроса и ответа-данные в зависимости от действий базы данных.

<script type="text/javascript">
 function showEditBox(id) {
 $('#frmAdd').hide();
 var currentMessage = $("#message_" + id + " .message-content").html();
 var editMarkUp = '<textarea rows="1" cols="20" id="txtmessage_'+id+'">'+currentMessage+'</textarea><button name="ok" onClick="callCrudAction(\'edit\','+id+')">Save</button><button name="cancel" onClick="cancelEdit(\''+currentMessage+'\','+id+')">Cancel</button>';
 $("#message_" + id + " .message-content").html(editMarkUp);
 }
 function cancelEdit(message,id) {
 $("#message_" + id + " .message-content").html(message);
 $('#frmAdd').show();
 }
 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();
 },
 error:function (){}
 });
 }
</script>

ajaxcrud

PHP скрипт для операций CRUD

Следующий код выполняет запросы к базе данных. Этот скрипт PHP после выполнения CRUD действия обновляет записи в результате ответа AJAX.

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;
}
}

Демонстрашка

Источник

Как заставить работать этот скрипт:

1. Создать таблицу phppot_examples

2. В файле dbcontroller.php установить пароль от своей БД MySQL.

Вложения:
ФайлОписаниеРазмер файла:
Скачать этот файл (ajax-add-edit-delete-records-in-database-using-php-and-jquery.zip)ajax-add-edit-delete-records-in-database-using-php-and-jquery.zip 10 Кб