DeeDi - трезвые записки

Ajax Events

Отправляем данные на сервер на файл-обработчик ajax/example.php. В примере используем ajaxStart, ajaxSend, ajaxSuccess. Остальные функции используются аналогично, поэтому вы без труда сможете их применить самостоятельно.

 //jQuery$(document).ready(function (){
$("#example_j button").click(function(){
var aaa = $("#example_j input:first").val();
var bbb = $("#example_j input:last").val();
$("#example_j span").ajaxStart(function(){
$(this).text("Аякс стартовал");
});
$("#example_j p").ajaxSend(function(evt, request, settings){
$(this).append("Запрос отправлен " + settings.url);
});
$("#example_j p").ajaxSuccess(function(evt, request, settings){
$(this).append(" <strong>Запрос завершен успешно</strong> ");
});
$.post("ajax/example.php", {a: aaa, b: bbb}, function(data){$("#example_j span").text(data)}
)
});
});
//HTML/CSS
<style>
#example_j{border:solid 1px #999; margin:5px; padding:10px}
</style>
<div id="example_j">
<input value="" /><input value="" />
<button>Отправить</button> <span>Заполните поля и отправьте их на сервер</span>
<p></p>
</div>
Заполните поля и отправьте их на сервер

Обработчик для этого примера очень простой ajax/example.php:

<?php 
if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest') {
echo "Вы отправили на сервер ".$_POST["a"]." и ".$_POST["b"];
sleep(2);
}
?>

Сначала проверяем существует ли XMLHttpRequest , т.е. аяксом ли отправлен был запрос. Если да, то просто выводим полученные данные из формы. sleep(2) устанавливает задержку вывода результата на 2 сек, здесь функция нужна только для того, чтобы вы могли почувствовать процесс запроса.

Боковой текст: