Как добавить спиннер загрузчика в мой пользовательский .js?

Question

Я использовал решение, представленное в этом посте: Проверьте существующую электронную почту в кассе WooCommerce, используя Ajax

, и она отлично работает.

Единственное, что мне нужноявляется то, что ajax использует загрузку счетчика, чтобы указать пользователю, что система загружает информацию.

Answer 1

Здесь я добавил ответ о том, как установить загрузку изображения в вызове ajax.Если вы хотите установить загрузчик вне ввода, то вам необходимо внести следующие изменения

CSS

#loadingImage {
    display:none;
} 

HTML

Здесь я использую несколько фиктивных GIF для примера.Вы можете установить любой GIF и применить CSS, который вы хотите.

<p class="form-row form-row form-row form-row-first validate-required woocommerce-validated" id="billing_email_field">
    <label for="billing_email" class="">Email <abbr class="required" title="required">*</abbr></label>
    <input type="text" class="input-text " name="billing_email" id="billing_email" placeholder="Email" value="abc@gmail.com">
    <img src="https://lh6.ggpht.com/_S0f-AWxKVdM/Sc4G-1MAUtI/AAAAAAAAHg8/SoQCgQ6-aSY/1%5B3%5D.gif?imgmax=800" id="loadingImage">
</p>
<span class="message"></span>

Script

$('#loadingImage').show();  // show the loading image.
var data = {
   'action': 'validate_email',
   'billing_email' : input_value
};
$.ajax({
    url: validateEmail.ajaxurl,
    type: "POST",
    cache: false,
    data: data,
    success : function(html){
        $('.message').html(data);
        $('#loadingImage').hide(); // hide the loading image
    }
});

Answer 2

Я беру пример вашей предоставленной ссылки.Если вы используете ту же строку кода, вам придется изменить приведенную ниже строку кода.В противном случае укажите строку кода.

В приведенном ниже примере сначала укажите loadingImage для изображения, которое вы хотите загрузить во время обработки.

ОТ

$.post( validateEmail.ajaxurl, { action:'validate_email', billing_email:input_value }, function(data) {
    $('.message').html(data);
});

TO

$('#loadingImage').show();  // show the loading image.
var data = {
   'action': 'validate_email',
   'billing_email' : input_value
};
$.ajax({
    url: validateEmail.ajaxurl,
    type: "POST",
    cache: false,
    data: data,
    success : function(html){
        $('.message').html(data);
        $('#loadingImage').hide(); // hide the loading image
    }
});