Открыть меню    

Ajax добавить и удалить данные из базы данных, используя jQuery и PHP

ajax удаляем и добавляем записи в базу данных MySQL Если вы знакомы с основами библиотеки javascriptjQuery, возможно вы захотите изучить ajax c целью взаимодействовать с базой данных MySQL(удалять или добавлять данные в таблицы). В этой статье вы узнаете, как отсылать данные на сервер и получать ответ (положительный или ошибку). Как обычно весть процесс происходит без перезагрузки страницы, также данная техника отлично подойдет для удаления или вставки данных в базу данных.

ajax удаляем и добавляем записи в базу данных MySQL

В этом руководстве мы будем использовать три файла: index.php, response.php и config.php. Главная страница наполняется записями из БД, плюс в ней присутствует текстовое поле, которое может быть использовано, чтобы отослать Ajax-ом данные в файл response.php.

Пользователи не имеют визуального контакта с response.php, это просто файл-обработчик данных отосланных методом POST. Главная задача файла response.php это возвратить данные или ошибку на главную страницу.

Давайте начнем с создания таблицы add_delete_record в базу данных MySQL. Вы можете использовать SQL запрос, приведенный ниже, в phpMyAdmin.

SQL

CREATE TABLE IF NOT EXISTS 'add_delete_record' (
  'id' int(11) NOT NULL AUTO_INCREMENT,
  'content' text NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Конфигурация

Конфигурационный файл позволит нам подключить требуемую базу данных, используя учетные данные MySQL; этот файл потребуется файлам index.php и response.php. Отредактируйте файл config.php, то есть заполните нижеприведенные переменные своими значениями.

PHP

<?php
########## MySql details (Replace with yours) #############
$username = "xxxxxxxx"; //mysql username
$password = "xxxxxxxx"; //mysql password
$hostname = "localhost"; //hostname
$databasename = "database_name"; //databasename

$connecDB = mysql_connect($hostname, $username, $password)or die('could not connect to database');
mysql_select_db($databasename,$connecDB);
?>

Главная страница

Мы будем использовать метод $.ajax, чтобы создать запрос к response.php, если вы исследуете приведенные ниже код, то вы увидите там два метода click() и on(), на которые повешены запросы ajax.

Методы click() и on() выполняют похожие задачи: оба срабатывают, когда пользователь нажал и отпустил кнопку мышки; разница же заключается в том, что метод on() работает, в отличие от click(), и с элементами (в нашем случае это button), которые подгружаются на страницу посредством ajax. (Для старых версий библиотеки вы можете использовать методы live и delegate).

jQuery

$(document).ready(function() {
    // Добавляем новую запись, когда произошел клик по кнопке
    $("#FormSubmit").click(function (e) {

        e.preventDefault();

        if($("#contentText").val()==="") //simple validation
        {
            alert("Введите текст!");
            return false;
        }

        var myData = "content_txt="+ $("#contentText").val(); //post variables

        jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных,  которые пришлет сервер в ответ на запрос ,например, HTML, json
            data:myData, //данные, которые будут отправлены на сервер (post переменные)
            success:function(response){
            $("#responds").append(response);
            $("#contentText").val(''); //очищаем текстовое поле после успешной вставки
            },
            error:function (xhr, ajaxOptions, thrownError){
                alert(thrownError); //выводим ошибку
            }
        });
    });

    //Удаляем запись при клике по крестику
    $("body").on("click", "#responds .del_button", function(e) {
        e.preventDefault();
        var clickedID = this.id.split("-"); //Разбиваем строку (Split работает аналогично PHP explode)
        var DbNumberID = clickedID[1]; //и получаем номер из массива
        var myData = 'recordToDelete='+ DbNumberID; //выстраиваем  данные для POST

        jQuery.ajax({
            type: "POST", // HTTP метод  POST или GET
            url: "response.php", //url-адрес, по которому будет отправлен запрос
            dataType:"text", // Тип данных
            data:myData, //post переменные
            success:function(response){
            // в случае успеха, скрываем, выбранный пользователем для удаления, элемент
            $('#item_'+DbNumberID).fadeOut("slow");
            },
            error:function (xhr, ajaxOptions, thrownError){
                //выводим ошибку
                alert(thrownError);
            }
        });
    });
});

HTML и PHP код:

HTML + PHP

<div class="content_wrapper">
<ul id="responds">
<?php
//подключаем конфигурационный файл
include_once("config.php");

//MySQL запрос
$Result = mysql_query("SELECT id,content FROM add_delete_record");

// получаем все записи из таблицы add_delete_record
while($row = mysql_fetch_array($Result))
{
echo '<li id="item_'.$row["id"].'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$row["id"].'">';
echo '<img src="images/icon_del.gif" border="0" />';
echo '</a></div>';
echo $row["content"].'</li>';
}

//Закрывает соединение с сервером MySQL
mysql_close($connecDB);
?>
</ul>
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5"></textarea>
<button id="FormSubmit">Add record</button>
</div>
</div>

Возвращаем данные

Файл response.php возвращает результат в соответствии с запросом пользователя. В response.php протекает удаление/добавление записи в БД и возвращается успешный ответ или сообщение с ошибкой. Поскольку весь процесс происходит на сервере, необходимости в коде jQuery нет.

Методом пост данные отсылаются в файл response.php. Если переменная content_txt, переданная методом POST, установлена, PHP добавляет новую запись и возвращает результат; запрос на удаление записи, соответственно, удаляет запись из БД.

Обратите внимание на метод вывода ошибок, мы можем возвратить обычный PHP заголовок с ошибкой 500, например: header(«HTTP/1.1 500 Error Message!»). Когда мы посылаем сообщение с ошибкой, обработчик ajax в index.php проверяет http-статус и выдает нам предупреждение.

PHP


<?php
//подключаем конфигурационный файл бд
include_once("config.php");

//проверяем $_POST["content_txt"] на пустое значение
if(isset($_POST["content_txt"]) && strlen($_POST["content_txt"])>0)
{

    // очищаем значение переменной, PHP фильтры FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH
    // (Удаляют тэги, при необходимости удаляет или кодирует специальные символы)

    $contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);

    // Insert sanitize string in record
    if(mysql_query("INSERT INTO add_delete_record(content) VALUES('".$contentToSave."')"))
    {
        //Record is successfully inserted, respond to ajax request
        $my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL
        echo '<li id="item_'.$my_id.'">';
        echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
        echo '<img src="images/icon_del.gif" border="0" />';
        echo '</a></div>';
        echo $contentToSave.'</li>';
        mysql_close($connecDB);

    }else{
        //вывод ошибки

        //header('HTTP/1.1 500 '.mysql_error());
        header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }

}
elseif(isset($_POST["recordToDelete"]) && strlen($_POST["recordToDelete"])>0 && is_numeric($_POST["recordToDelete"]))
{//do we have a delete request? $_POST["recordToDelete"]

    // очищаем значение переменной, PHP фильтр FILTER_SANITIZE_NUMBER_INT
    // Удаляет все символы, кроме цифр и знаков плюса и минуса

    $idToDelete = filter_var($_POST["recordToDelete"],FILTER_SANITIZE_NUMBER_INT);

    //try deleting record using the record ID we received from POST
    if(!mysql_query("DELETE FROM add_delete_record WHERE id=".$idToDelete))
    {
        //If mysql delete record was unsuccessful, output error
        header('HTTP/1.1 500 Could not delete record!');
        exit();
    }
    mysql_close($connecDB);

}else{

    //Output error
    header('HTTP/1.1 500 Error occurred, Could not process request!');
    exit();
}
?>

Источник

Комментарии к статье

аватарка пользователя
2013-07-16
Артем

Уважаемый, Ваш скрипт почему-то не удаляет записи из БД, хотя и выполняется без ошибок

аватарка пользователя
2013-07-16
dnz

ну подумайте, почему он не удаляет.

аватарка пользователя
2013-10-14
Александр

объясните почему не удаляет,пожалуйста

аватарка пользователя
2013-10-16
Александр

Скажите лучше, почему русские символы не добавляет??

аватарка пользователя
2013-10-16
Sancho

$contentToSave = filter_var($_POST["content_txt"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
Эта строка фильтрует русские символы

аватарка пользователя
2013-10-16
Sancho

подключил библиотеку и удаление заработало)
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>

аватарка пользователя
2013-10-16
dnzl

congratulations

аватарка пользователя
2014-01-23
El

Отлично !!! Мне понравилось

аватарка пользователя
2014-03-18
Александр

Скажите пожалуйста, а как а ajax добавить еще 1 /2 поля для записи в mysql

аватарка пользователя
2014-03-18
Александр

вот как в php добавил
$contentToSave = filter_var($_POST['content_txt']);
$SMSToSave = $_POST['sms'];
// Insert sanitize string in record
if(mysql_query("INSERT INTO `add_delete_record`(`content`,`sms`)
VALUES('".$contentToSave."','".$SMSToSave."')"))
{
//Record is successfully inserted, respond to ajax request
$my_id = mysql_insert_id(); //Get ID of last inserted record from MySQL
echo '<li id="item_'.$my_id.'">';
echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
echo '<img src="../../../images/icon_del.gif" border="0" />';
echo '</a></div>';
echo $contentToSave.''.$SMSToSave.'</li>';
mysql_close($connecDB);

аватарка пользователя
2014-06-09
VladimirDigl

Респект за статью

аватарка пользователя
2014-06-10
Местный

Скажите пожалуйста, а как а ajax добавить еще 1 /2 поля для записи в mysql #Part2

аватарка пользователя
2014-10-09
Vasya

А как можно добавить еще одно поле?

аватарка пользователя
2014-10-26
Ars

Сделал по аналогии.
Элементы удаляет исправно.
Однако на этой же странице через ajax у меня реализована сортировка выводимых полей из БД.
Так вот после того, как сделана сортировка - элементы не удаляются.
В чём может быть проблема?
Кажется дело в том, что изначально выводится просто список за счёт include, а после сортировки этот элемент убирается, а отсортированный список выводится в другом контейнере.
Но и там и там та же самая "delete_button". Нелогично получается.
Как можно это исправить?


аватарка пользователя
2015-11-28
Vovik

//MySQL запрос
$Result = mysql_query("UPDATE `add_delete_record` WHERE id = '".$id."'");

аватарка пользователя
2016-01-12
MaZaHaKa

// Вот как я сделал.
// У меня циклом выводятся записи из БД, каждой записи естественно свой id, и на каждой записи я // сделал ссылку типа "<a class="del_money" title="'.$Row['id'].'" href="#">Удалить запись</a>"
// При нажатии на ссылку, я с помощью AJAX методом POST передаю id записи в обработчик.
// Вот код. (Строго не судите, учусь:))
//########## PHP #############
// - Удаление записей - \\
if($_SESSION['auth'] == 'yes_auth' AND $_SESSION['access'] == '777') {
if ( isset($_POST['id']) && !empty($_POST['id']) ) {
mysql_query("DELETE FROM `money` WHERE `id` = $_POST[id]", $link);
exit(header('location: /page/money.php'));
}
}
//########## JS (AJAX) #############
<script type="text/javascript">
$(document).ready(function(){
//Удаление записей
$(".del_money").click(function(){ // При нажатии на класс .del_money происходит..
var del_id = $(this).attr('title');// "del_id" равно значению <a title="'.$Row['id'].'">, тому что находиться в "title"
$.ajax({ // AJAX запрос
type: "POST", // Тип запроса
url: "/page/money.php", // На какую страницу отправляем данные
data: {id:del_id} // id = переменной(del_id), а оно = "title", а "title" = '.$Row['id'].'
}).done(function( result ) // Если всё выполнено успешно, перезагружаем страницу.
{
location.reload(); // Можно написать свое условие
});
});
});
//########## HTML (Эту ссылку тыкайте куда хотите.)#############
<a class="del_money" title="'.$Row['id'].'" href="#">Удалить запись</a>





Надеюсь что всем всё понятно..

аватарка пользователя
2016-01-12
MaZaHaKa

Если чё обращайтесь. Вот мыло: MaZaHaKa_SRV@sapces.ru

аватарка пользователя
2016-01-28
новичок

Для тех кто хочет добавить еще 1 или больше полей. В Jquery собирайте переменную myData так myData={content_txt1: $("#contentText1").val(), content_txt2: $("#contentText2").val() };
И не забывайте, что в php надо будет отлавливать уже передается не один параметр content_txt, а больше. В моем примере два: content_txt1 и content_txt2. Поэтому:
if(isset($_POST["content_txt1"]) && strlen($_POST["content_txt1"])>0 && $_POST["content_txt2"]) && strlen($_POST["content_txt2"])>0)
{
$contentToSave1 = filter_var($_POST["content_txt1"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
$contentToSave2 = filter_var($_POST["content_txt2"],FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);
....

//И соответственно в базу пишутся тоже 2 параметра:

if(mysql_query("INSERT INTO add_delete_record(content1) VALUES('".$contentToSave1."')") && mysql_query("INSERT INTO add_delete_record(content2) VALUES('".$contentToSave2."')") )
{ ....}
else{
//вывод ошибки

//header('HTTP/1.1 500 '.mysql_error());
header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
exit();
}
}

аватарка пользователя
2016-04-26
Игорь

ппппп

аватарка пользователя
2016-05-16
Сергей

Не добавляется кириллица, кто как решил проблему?
Демо также не добавляется кириллица!!

аватарка пользователя
2016-06-14
Игорь

Чтобы поменять на кириллицу, замените
ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
DEFAULT CHARSET с latin1 на utf8 или на utf8_general_ci
либо вообще уберите эту строку, не пойму к чему было латинскую кодировку указывать?

аватарка пользователя
2017-07-02
Леон

Подскажите, как сделать так, чтоб ошибка в заголовке передавалась на русском языке. А то одни кракозябры показываются.
Т.е. вместо header('HTTP/1.1 500 Could not delete record!'); надо header('HTTP/1.1 500 Невозможно удалить запись!');

аватарка пользователя
2018-02-21
Tony

У меня ни фига не работает

аватарка пользователя
2018-02-21
Tony

У меня ни фига не работает

аватарка пользователя
2018-07-10
Инна

Как сделать, чтобы ошибки показывались на странице рядом с полем для текста, а не всплывающим сообщением?

аватарка пользователя
2018-07-10
dnzl

Инна, навскидку не скажешь, но js это легко делается

аватарка пользователя
2018-07-11
Инна

dnzl, может для Вас легко, для меня наоборот. Можете пример кода показать?

аватарка пользователя
2018-07-11
dnzl

Инна, неа - писать я его, конечно, не буду

Укладка штучного паркета мербау. Необрезная доска мербау.