JQuery Ajax отправка формы при клике на элемент (ссылку кнопку) - обработка ответа, пример кода
Primary tabs
Вот такой код отправки формы и обработки ответа (скрываем часть формы и меняем текст на кнопке в случае успешного ответа, в случае же неуспешного выводим предупреждение):
$(function() { // после загрузки страницы
init();
});
function init() // тут привяжем обработчики и иное
{
$('#submit-ticket').on('click', function() { // к какому элементу привязывать отправку
var formData = $('#ticket-form').serialize(); // какую форму отправлять
var url = '/site/saveticket'; // куда отправлять
sendAjax(url, formData);
return false;
});
}
function sendAjax(url, data)
{
showLoaderIdentity(); // показываем идентификатор загрузки
$.ajax({ // сам запрос
type: 'POST',
url: url,
data: data, // данные которые передаём серверу
dataType: "json" // предполоижтельный формат ответа сервера
}).done(function(res) { // если успешно
hideLoaderIdentity(); // скрываем идентификатор загрузки
console.log('Ответ получен: ', res);
if (res.success) { // если все хорошо
console.log('ОК!)');
$('#submit-ticket').html(res.message); // меняем текст кнопки
$('#ticket-form-fields').removeSmoothly(); // плавно скрываем уже не нужную часть формы
$('#submit-ticket').off(); // отрубаем все привязанные события
$('#submit-ticket').addClass('page-scroll'); // добавляем нужный класс
$('#submit-ticket').attr('href', '#contact'); // и атрибут
} else { // если не нравится результат
console.log('Пришли не те данные!');
alert(res.message);
}
}).fail(function() { // если ошибка передачи
hideLoaderIdentity();
console.log('Ошибка выполнения запроса!');
});
}
Вывод идентификатора загрузки: http://fkn.ktu10.com/?q=node/8150
- Log in to post comments
- 9479 reads