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

Если вы знакомы с основами библиотеки javascriptjQuery, возможно вы захотите изучить ajax c целью взаимодействовать с базой данных 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();
}
?>

Источник