Question

我使用了这篇文章中提供的解决方案：Check for existing email in WooCommerce checkout using Ajax

它工作得很好。

我唯一需要的是ajax使用微调器加载来向用户指示系统正在加载信息。

Answer 1

我以您提供的参考链接为例。如果您使用相同的代码行，则必须更改以下代码行。否则，请提供您的代码。

在下面的示例中，首先将 loadingImage 添加到要在处理时加载的图像。

这

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

要

$('#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

这里我添加了如何在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>

<强>脚本

$('#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
    }
});

如何将加载器微调器添加到我的自定义.js？

2 个答案: