Как сделать обработку данных без перезагрузки страницы?

Question

[alex_belouss]

Например при регистрации на сайте, заполнив данные нажимаешь на кнопку, сначала страница не перезагружается, просто на кнопке появляется анимация загрузки (как бы обработка данных), через некоторое время страница перезагружаетя.

пример

Comments

[Сергей delphinpro]

1. Оправить ajax-запрос с данными.
   
2. Показать анимацию на кнопке.
   
3. Дождаться ответа сервера.
   
4. Перезагрузить/Перенаправить/Перерисовать страницу.
   
5. Профит
   

Ты же сам все это написал в вопросе.

[Sergej]

Вы же поставили тег ajax и расписали логику.
В чем проблема то?)

Answer 1

[Лютер Ежов]

Форму отправляете через AJAX:

$.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: $('form#myForm').serialize(),
        success: function(data) {
                   // тут перезагружаете страницу
                   // можно добавить проверку ответа 
                   // (например, если всё ок, а если нет, то выводить ошибку)
                   location.reload();
                 }
    });

Answer 2

[Дмитрий Масленников]

Да, тут поможет AJAX. На клиенте делаем:

$.post('/call.php', { data: data }, function(result) {
   // json
   result = JSON.parse(result);
   // actions
});

И в серверной части (например, на PHP)

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
   // vars
   $data = isset($_POST['data']) ? flt_input($_POST['data']) : NULL;
   // actions
   $result = some_function($data);
   // output
   echo json_encode($result, true);
   exit();
}

Конечно, есть более сложные и интересные способы на основе COMET-технологии (те же WebSockets), но для начала стоит освоить AJAX.

Comments

[alex_belouss]

С аяксом понятно, он возвратит результат, но анимация загрузки это как бы индикатор обработки данных, тоесть пока обрабатываются данные, страница висит, потом перезагржает страницу, как отследить именно процесс обработки и конец?

[Дмитрий Масленников]

здесь все элементарно, в начале ajax-запроса ставите lock-функцию, после получения данных unlock:

lock();
$.post('/call.php', { data: data }, function(result) {
   // unlock
   unlock();
   // json
   result = JSON.parse(result);
   // actions
});

в самой функции lock устанавливаете preloader, а в unlock его убираете. в вашем случае - вывод текста на кнопке "создается" и значка прелоадера.