Основное меню

Удаление комментариев с помощью Ajax

Самым первым действием будет создание HTML-файла и затем вставка кода между тегами <body></body>, написанного ниже:

<p>
<img src="images/avatar-1.png">
<br><span>Марк</span>
<br>Прикольная статья, мне очень нравится!
<br>5 марта 2011<br><br>
<a style="padding-left: 360px;" href="#" id="1" class="delete"><img src="images/del.png"></a>
</p>
<p>
<img src="images/avatar-2.png">
<br><span>Джон</span>
<br>Я бы кое что изменил в этой статье, а так в целом неплохо.
<br>29 февраля 2011<br><br>
<a style="padding-left: 360px;" href="#" id="2" class="delete"><img src="images/del.png"></a>
</p>
<p>
<img src="images/avatar-3.png">
<br><span>Джесика</span>
<br>Да я тоже согласна что требуется доработка.
<br>24 февраля 2011<br><br>
<a style="padding-left: 360px;" href="#" id="3" class="delete"><img src="images/del.png"></a>
</p>
<p>
<img src="images/avatar-4.png">
<br><span>Александр</span>
<br>Незнаю, мне кажется что все впорядке. Спасибо вам. Так держать!
<br>19 февраля 2011<br><br>
<a style="padding-left: 360px;" href="#" id="3" class="delete"><img src="images/del.png"></a>
</p>

Теперь нужно создать индикатор, с помощью которого мы сможем отследить процесс отправки данных php-обработчику:

<div id="load" align="center">
<img src="images/loading.gif" width="28" height="28" align="absmiddle"> Loading...
</div>

Задаем индикатору следующие стили и сохраняем в файл style.css:

#load {
position:absolute;
left:225px;
background-image:url(images/loading-bg.png);
background-position:center;
background-repeat:no-repeat;
width:159px;
color:#999;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
height:40px;
font-weight:300;
padding-top:14px;
top: 23px;
}

Для того чтобы все это заработало, нам понадобится библиотека jQuery, подключаем ее, вставляя в HTML-файл следующий код:

<script type="text/javascript" src="script.js"></script>

Переходим к написанию сценария:

<script type="text/javascript">
// скрываем индикатор обработки данных
$(document).ready(
function() {
$('#load').hide();
}
);
// перехватываем значение id элемента с классом delete
// с помощью ajax, отправляем значение методом POST файлу delete.php
$(function() {
$(".delete").click(
function() {
$('#load').fadeIn();
var commentContainer = $(this).parent();
// получаем значение элемента
var id = $(this).attr("id");
var string = 'id='+ id ;

$.ajax({
type: "POST",
// файл-обработчик
url: "delete.php",
data: string,
cache: false,
// сворачиваем удаленный комментарий, и выводим индикатор
success: function(){
commentContainer.slideUp('slow', function() {$(this).remove();});
$('#load').fadeOut();
}
});
return false;
}
);
});
</script>

Для применения такого процесса на практике нужно для каждого комментария задать порядковый номер, а затем сделать запрос на удаление из базы данных того или иного комментария.
На этом организация процесса по удалению комментариев с помощью Ajax закончена, все файлы для примера есть в архиве, который можно скачать ниже.

Скачать файл
размер файла: 104,13 Kb
cкачиваний: 48

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.