Question

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

按下提交按钮后隐藏表单
显示旋转图标
然后如果成功获得成功消息而没有表格
否则显示错误。

代码：

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会”）隐藏（）;

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

Answer 2

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隐藏它。

Answer 3

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

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

获取ajax成功并在加载时隐藏表单？

3 个答案: