Справочники, инструменты, документация

Ajax: Отправка запроса

Изменение поля в базе данных без перезагрузки страницы при отправке Ajax запроса.

Дамп базы данных MySQL

Пожалуй с чего стоит начать, так это с создания двух таблиц, которые нам потребуются. Но перед этим создадим саму базу данных под названием lessons, с привилегиями по стандарту: пользователь - root, пароль - пусто. В первой таблице будут все статьи, во второй варианты публикации этих статей. И так создаем таблицу articles и в ней указываем три поля - id, title, pub.

--
-- Структура таблицы `articles`
--

CREATE TABLE IF NOT EXISTS `articles` (
 `id` int(2) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) NOT NULL,
 `pub` int(1) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

Заполняем эту таблицу четырьмя строками. Машины, Компьютеры, Самолеты, Вертолеты.

--
-- Дамп данных таблицы `articles`
--

INSERT INTO `articles` (`id`, `title`, `pub`) VALUES
(1, 'Машины', 2),
(2, 'Компьютеры', 1),
(3, 'Самолеты', 1),
(4, 'Вертолеты', 1);

Теперь переходим к другой таблице с вариантами публикации. Структура таблицы pub.

--
-- Структура таблицы `pub`
--

CREATE TABLE IF NOT EXISTS `pub` (
 `id` int(1) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=3 ;

Заполняем ее двумя строками - Опубликовано и Скрыто.

--
-- Дамп данных таблицы `pub`
--

INSERT INTO `pub` (`id`, `title`) VALUES
(1, 'Опубликовано'),
(2, 'Скрыто');

Подключение к базе данных. Главная страница

Переходим ко второй части, в который сначала мы должны подключиться к базе данных. Создаем файл bd.php, который будет находиться в корне нашего скрипта. База данных - lessons, пользователь - root, пароль - пусто.

<?
$db = mysql_connect ("localhost", "root", "");
mysql_select_db ("lessons", $db);
mysql_set_charset("UTF8", $db);
mysql_query("SET NAMES 'UTF8'");
if (!$db) echo mysql_error();
?>

Теперь создаем главную страницу index.php. Первым делом подключаем файл bd.php, чтобы нам соединиться с базой данных.

require("bd.php");

Теперь делаем запрос к таблице articles, в котором будет вложенный запрос ко второй таблице pub.

$sql=mysql_query("SELECT articles.*, (SELECT pub.title FROM pub WHERE pub.id=articles.pub) 
AS pub FROM articles");

После чего выводим все записи из таблицы articles и получаем также варианты где и какая статья опубликована. Чтобы не дробить сильно скрипт, сразу полностью его выведу.

<table class="table">
<tr>
<th>#</th>
<th>Название</th>
<th>Публикация</th>
</tr>
<?
require("bd.php");
$sql=mysql_query("SELECT articles.*, (SELECT pub.title FROM pub WHERE pub.id=articles.pub) 
AS pub FROM articles");
@$res = mysql_fetch_array($sql);
do{
$i++;
echo"
<tr>
<td>".$i."</td>
<td>".$res[title]."</td>
<td>
<div class='pub' title='".$res[id]."'>".$res[pub]."</div>
</td>
</tr>"; 
}
while(@$res = mysql_fetch_array($sql));
?>
</table>

Не забудем также подключить стили и js-скрипты.

<link type="text/css" rel="stylesheet" href="css/demo.css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/pub.js"></script>

В файле стилей demo.css особо выделить нечего, там все просто, а вот на счет файла pub.js происходит, своего рода, взаимодействие между php и базой данных mysql и выполняется изменение поля в базе данных без перезагрузки страницы.

JQuery. Файл pub.js

Создаем функцию документа, которая будет иметь класс pub и при клике обращаться к файлу pub.php, который в дальнейшем будет обрабатывать запрос и вносить изменение в базу данных, отдавая результат обратно файлу pub.js.

Передавать будем методом POST (я думаю это и так разумеется, ведь безопасность тоже требуется), но существует вопрос - что мы конкретно передаем? - А передаем мы идентификатор данной статьи в поле title у div. Затем все это дело парсим, через функцию json_decode и декодируем данные в строку. Вот так устроен и работает данный скрипт.

jQuery(document).ready(function($) {
    $(".pub").click(function() {
    var publicTitle = $(this).attr("title");
    var titleID = $(this).attr("id");
    var nameId = $(this);
        $.ajax(
            { 
                url:'pub.php',
                type:'post',
                data:{"id": publicTitle}, 
                success:function (publicObj,test) {
                var result = $.parseJSON(publicObj);                
                $(nameId).html(result.title).hide().fadeIn(1000); 
                }
                }
            );                  
    }); 
});

PHP обработчик. Файл pub.php

Решил я не разбивать на кусочки, так как так думаю, будет Вам проще понять код, чем бить все на мелкие части. Ну первым делом подключаем файл bd.php, с помощью которого подключаемся к базе данных. Принимаем методом POST идентификатор от файла pub.js. Затем выполняем запрос к таблице статей articles, где идентификатор равен нажатому на ссылку индефикатору. Создаем условие, в котором при выводе опубликованной записи из таблицы статей articles, поле pub меняется на 2, то есть скрыто, и наоборот публикуем - 1, если оно было скрыто. Затем с помощью функции json_encode возвращаем данные.

<?
require("bd.php");

if(isset($_POST['id'])){$id = $_POST['id'];}

$sql = mysql_query("SELECT id, pub FROM articles WHERE id='$id'");
$res = mysql_fetch_array($sql);
if($res['pub'] == 1){
    $sqlPublicTwo=mysql_query("UPDATE articles SET pub='2' WHERE id='$id'");
    $sqlPublicTitle=mysql_query("SELECT title FROM pub WHERE id='2'");
}
else{
 $sqlPublicOne=mysql_query("UPDATE articles SET pub='1' WHERE id='$id'"); 
    $sqlPublicTitle=mysql_query("SELECT title FROM pub WHERE id='1'");
}

@$sqlPublicObj = mysql_fetch_array($sqlPublicTitle);

echo json_encode($sqlPublicObj); 
?>

CSS. Файл стилей demo.css

Немного применим стилей для красоты таблицы и нажатия кнопки - Опубликовано, Скрыто.

.table{
    width: 250px;
}

.table th{
    padding: 5px;
    border-bottom: 2px solid #000000;
}

.table td{
    border-bottom: 1px solid #000000;
    padding: 5px;
}

.pub{
    cursor: pointer;
    color: blue;
}

Скачать пример