В библиотеке jQuery есть несколько методов для работы с ajax: jQuery.post, $.get, $.getJSON, $.ajax. В конечном счете, все они - более удобная надстройка над $.ajax. Объясню на простом ajax примере:
Отправим на страницу index.php данные с формы. После того, как данные отправлены, выведем сообщение. В случае ошибки также сообщим об этом пользователю.
Сначала методом $.post
var data = $('#form').serialize();
$.post('index.php',data,function(data,status){
if( status=='success' ){
alert('Данные успешно отправлены!')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
Как мы видим, это очень простой пример ajax запроса. Сначала сериализуем данные из формы в строку. Метод serialize() вернет строчку вида &name1=value1&name2=value2. Но метод post, помимо такой нотации, может принимать на вход данные в виде объекта. К примеру, отправим логин и пароль на проверку
$.post('index.php',{login:'leroy',password:'password'},function(data,status){
if( status=='success' ){
alert('Данные успешно отправлены!')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
Все предельно просто. Отмечу лишь следующее: так как http протокол текстовый, то данные все равно приводятся к виду &login=leroy&password=password. Если ваша форма отправляет данные get методом, то и нам нужно воспользоваться get методом jQuery.
var data = $('#form').serialize();
$.get('index.php?'+data,function(recdata,status){
if( status=='succes' ){
alert('Данные успешно отправлены!')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
Сюда разумеется объект подавать нельзя, так как мы просто конкатенируем две строки. Странный параметр recdata - это данные, которые вернул сервер. Это может быть что угодно. Как json и xml, так и обычный текст или HTML. К примеру, ответ мы получили в виде json. Чтобы им воспользоваться, надо написать нехитрую конструкцию с использованием функции eval. Дополним пример авторизации по ajax:
$.post ('index.php',{login:'leroy',password:'password'},function(data,status){
if( status=='success' ){
eval('var obj='+data);
if(obj.auth==true)
alert('Вы успешно прошли авторизацию!')
else
alert('Логин либо пароль не верны')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
На сервере для данного примера должен быть примерно такой php код
<?php
if($_POST['login']=='leroy' and $_POST['password']=='password'){
$auth = true;
setcookie('auth',md5($password.$login),time()+3600,'/');
}else $auth = false;
die( json_encode(array('auth'=>$auth)) );
?>
Нас тут выручает функция json_encode, которая конвертирует array в json. Еще вы можете заметить, что я записал в куки информацию, а именно хеш суммы логина и пароля. И эти Куки благополучно придут на браузер клиента после окончания ajax запроса, то есть точно так же как и при обычном post запросе, через форму. Дальше, если мы перезагрузим страницу после такой ajax авторизации, то где-то в php коде мы можем проверить пользователя на авторизованность
if( isset($_COOKIE['auth']) and $_COOKIE['auth']==md5('leroypassword') )
echo 'Сайт приветствует тебя';
else{
echo ''; // выводим форму авторизации
exit();
}
Чтобы не заморачиваться с eval, в jQuery есть метод getJSON. Он фактически идентичен $.post, за исключением того, что сервер должен ответить валидным json. Предыдущий пример будет выглядеть так
$.getJSON('index.php',{login:'leroy',password:'password'},function(data,status){
if( status=='success' ){
if(data.auth==true)
alert('Вы успешно прошли авторизацию!')
else
alert('Логин либо пароль не верны')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
Как я уже сказал выше, все эти методы являются надстройками над $.ajax. Метод ajax более настраиваемый, чем остальные. Пройдемся по трем методам($.get,$.post,$.getJSON) и реализуем их через $.ajax. Запрос методом get
$.ajax({
type: "GET",
url: "test.php",
dataType: "html"
})
Метод post
$.ajax({
type: "POST",
url: "some.php",
data: "login=leroy&password=password",
success: function(msg){
alert( "Данные успешно сохранены: " + msg );
}
});
Запрос json объекта
$.ajax({
url: "script.php",
type: "POST",
dataType: "json",
success: function(msg){
alert(msg.auth);
},
error: function(msg){
alert(‘Ошибка’);
}
}
)
У этого метода есть множество других настроек. Одна из самых интересных это async. По умолчанию он равен true. Интересен он прежде всего тем, кто еще не научился мыслить асинхронно. Если его выставить в false, то данные будут отправляться в том же потоке, что и вызов метода. Что это значит на деле, поможет понять пример
var dataHtml = $.ajax({
url: "script.php",
type: "POST",
data: ({id :1}),
dataType: "html",
async:false
}
).responseText;
alert(dataHtml)
Если вы проделаете то же самое с async: true, то ничего хорошего в dataHtml не получите. Дело в том, что вызов функции alert произойдет сразу же после отправки запроса, не дождавшись его завершения. Но при async:false метод ajax задержит выполнение js до тех пор, пока запрос полностью не завершится. Это удобно тем, что не приходится возиться с callback’ми. Также может быть интересен параметр dataType. По умолчанию, метод ajax сам пытается разобраться, что же такое отправил нам сервер. Если вы укажите один из вариантов xml, json, script, или htm, то jQuery автоматически конвертирует полученные данные в объект верного типа. Как было в примере с json.
Помимо этих методов в jQuery есть $.load, $.getScript, $.getJSON. Как правило, их тоже относят к ajax, хотя это и не так. Они используют фреймы или тег <scripts> $.getJSON тут не просто так, дело в том, что когда мы запрашиваем внутреннюю страницу нашего домена, то он работает по технологии ajax. Однако стоит нам запросить json данные с чужого сервера, то jQuery выполняет его уже при помощи тега <scripts>. Именно поэтому, когда вы делаете кросс доменный запрос, надо в url указать, какую callback функцию должен вызвать скрипт по завершении. Подробнее об этом я описал в этой статье.
Вот и все, что я хотел написать про ajax на jquery
Комментарии
Автор их пишет, наверное, в блокноте и там же проверяет. Для начала - success пишется с двумя s в конце. И с точки зрения грамматики английского языка, и с точки зрения синтаксиса jQuery правильно - success
Вопрос автору - зачем выкладывать заведомо нерабочие примеры? Чисто постебаться?
$.post('index.php',{a:1},function(data){alert(data);// json объект
},'json');
Description: Load JSON-encoded data from the server using a GET HTTP request.