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
- 8683 reads