javascript - 加载时获得ajax成功并隐藏表单？

Question

我正在尝试进行 ajax 注册，以下效果很好，它从我在其他地方编写的 php 函数获取数据，以及错误和成功工作的注册和消息。但我基本上在看：

1. 按下提交按钮后隐藏表单
2. 显示一个旋转图标，
3. 然后如果成功得到一个成功消息并且没有表格
4. 否则显示错误。

代码：

var ajaxurl = '<?php echo admin_url('admin-ajax.php') ?>';
jQuery('#register-me').on('click',function(){
   var action = 'register_action';
   var username = jQuery("#st-username").val();
   var mail_id = jQuery("#st-email").val();
   var firname = jQuery("#st-fname").val();
   var lasname = jQuery("#st-lname").val();
   var passwrd = jQuery("#st-psw").val();
   var ajaxdata = {
      action: 'register_action',
      username: username,
      mail_id: mail_id,
      firname: firname,
      lasname: lasname,
      passwrd: passwrd,
   }
   jQuery.post( ajaxurl, ajaxdata, function(res){
       jQuery("#error-message").html(res);
});

Answer 1

将 id="myform" 添加到表单元素，然后： $("#myform").hide();

关于图标。当您单击按钮时，您可以使图标可见，当成功或错误时，然后再次隐藏。

Answer 2

您可以在此处使用延迟选项：

jQuery('#register-me').on('click', function () {
    var action = 'register_action';
    var username = jQuery("#st-username").val();
    var mail_id = jQuery("#st-email").val();
    var firname = jQuery("#st-fname").val();
    var lasname = jQuery("#st-lname").val();
    var passwrd = jQuery("#st-psw").val();
    var ajaxdata = {
        action: 'register_action',
        username: username,
        mail_id: mail_id,
        firname: firname,
        lasname: lasname,
        passwrd: passwrd
    };
    jQuery.post(ajaxurl, ajaxdata)
        .beforeSend(function (data, textSttus, jqxhr) {
        $('#myform').hide();
        alert('Show the spinner');
        $('#spinner').show();
    })
        .done(function (data, jqxhr, settings ) {
        alert("success");
    })
        .fail(function (event, jqxhr, settings, exception) {
        alert("oops, fail");
        $('#myform').show();
    })
        .always(function (event, jqxhr, settings ) {
        alert('hide the spinner please');
        $('#spinner').hide();
    });
});

Answer 3

jQuery('#register-me').on('click',function(){
    $("#myform").hide();
    jQuery('#loadingmessage').show(); 
    var action = 'register_action';
    var username = jQuery("#st-username").val();
    var mail_id = jQuery("#st-email").val();
    var firname = jQuery("#st-fname").val();
    var lasname = jQuery("#st-lname").val();
    var passwrd = jQuery("#st-psw").val();
    var ajaxdata = {
        action: 'register_action',
        username: username,
        mail_id: mail_id,
        firname: firname,
        lasname: lasname,
        passwrd: passwrd,
    }
    jQuery.post( ajaxurl, ajaxdata, function(res){
        $('#loadingmessage').hide(); // hide the loading message
        $("#myform").show();
        jQuery("#error-message").html(res);
    });
});

表单的 id，并添加一个带有图像的 div，给它一个 id 并用 css 隐藏它。