Блог

Главная - Вопросы по программированию - Как: После проверки js, показывающей изображение обработки

Как: После проверки js, показывающей изображение обработки

#php #javascript #jquery #ajax #validation

#php #javascript #jquery #ajax #проверка

Вопрос:

Я пытаюсь получить изображение обработки, отображаемое после успешной отправки с проверкой с помощью gen_validatorv4.js .

Проблема в том, что formdata отправляется в php-файл, который отправляет данные в Google speadsheet. И это занимает около 3-10 секунд, поэтому люди снова нажимают на кнопку отправки. Вот почему я хочу изображение для обработки. Есть идеи, как это сделать?

$ (документ).готово(function(){ $(‘#ajax_loading’).show();}

????

Или любая помощь приветствуется!

Комментарии:

1. перед отправкой через ajax (например, нажмите (функция () { }) или отправьте (функция (){ })), загрузите контейнер и покажите загружаемое изображение, после успеха: функция (данные) { /* удалите это загружаемое изображение * / }

Ответ №1:

привяжите событие click к кнопке отправки и покажите изображение ajax_loading в событии click. единственный способ скрыть это — когда вы получаете событие ответа. когда вы получите ответ обратно, вы можете скрыть изображение ajax_loading.

Ответ №2:

Я поклонник jQuery для решения этих проблем, вы можете попробовать jQuery NimbleLoader для загрузки изображения, я бы также предложил попробовать, как включить / отключить элемент с помощью jQuery, чтобы включить или отключить форму, чтобы предотвратить двойную отправку.

Ответ №3:

Перейдите на этот сайт:http://www.ajaxload.info / и создайте изображение самостоятельно.

Допустим, изображение вызывается loader.gif

Тогда, если ваша форма похожа на эту <form id="myform"> , ваш jquery будет выглядеть примерно так: 

 $('#myform').submit(function(){
       $('#myform').prepend("<div id="loader"></div>");
       ... do stuff here ...
        $('#loader').remove();
})

и у вас будет этот CSS: 

 #loader {
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: url("loader.gif") no-repeat center center;
}