Увлекаясь javasctipt я все больше и больше понимаю что данный программный язык становиться неотъемлемой частью сайтов созданных для людей.

Только на JS можно создать действительно интересные элементы сайта, которые вы не выполните на PHP, к примеру динамические кнопочки.

Недавно встала передо мной задача, сделать кнопочку и показать пользователю процесс выполнения действия PHP, все оказалось довольно просто и понятно и сейчас я приведу вам данный пример.

Давайте для начала начнем с функции на PHP, конечно же PHP в данном случае не обязателен, но в большинстве случаев мы обращаемся именно к нему для выполнения каких либо действий, обновление базы данных или же устанавливаем какие то параметры, подсчитываем, перезаписываем и многое другое, поэтому я и решил что пример с JS-PHP будет более интересный.

Давайте создадим файл и назовем его test.php, в нем напишем простенькую функцию получения пост запроса и его обработки.

function test()
{
    if(empty($_POST['id']))
    {
        die('stopped');
    }

    if($_POST['id'] === 'view')
    {
        sleep(3); // небольшая задержка чтобы было понятно что к чему
        die('ok');
    }
    else
    {
        die('no');
    }
}

Что мы видим в этой функции, мы принимаем пост запрос с id, первое, если пост пустой, то прекращаем функцию и выводим stopped
Далее если пост содержит view то выводим ok, если что то другое, то no.
Почему я убиваю процессы

die();

Потому что мне просто это удобно и не важно что в функции, главное что бы было все понятно.

Теперь кнопочка.
У нас есть страница на которой имеется кнопка следующего вида
кнопочка

Нам нужно сделать следующее:
1. При нажатии на кнопочку слово «кнопочка» меняется на «выполняется»
2. После того как скрипт обработает все что нам нужно, выведем «готово».

Пишем JS

$(function(){
    // подгружаем функцию
    initType();
});
// Определяем клик
function initType(){
    $('.button').click(_initType);
}
// Сама функция
function _initType()
{
    var $me = $(this);
    var id = $me.attr('id');

    var $val = $('div[id="'+id+'"]');

    val = 'выполняю';
    $val.html(val);

    // Отправляем пост запрос в файл
    $.post('http://site,ru/test.php',{id:id},function(data){
            if(data === 'ok')
            {
                val = 'готово';
                $val.html(val);
            }
            else if(data === 'no')
            {
                val = 'ошибка';
                $val.html(val);
        });

    return false;
}

Вот и все, главное передайте передайте функции пост запрос, думаю с этим вы справитесь, если нет, пишите я объясню как и что, в этом примере это не столько важно, поэтому я и не писал про это.
Думаю всем все понятно ).

Недавно увидел интересный сайт, который наносит ваши логотипы на сувенирную продукцию, такую как ручки, зажигалки и прочее, в общем тампопечать. А теперь представьте что вы можете так рекламировать свой сайт и дарить своим знакомым сувениры с логотипом вашего сайта. Задумайтесь над этим!