Question

$(document).ready(function(){
    $('#registration_form').on('submit',function(e){

     /// e.preventDefault();
     $("#loading").show();
      var email = $('#email').val();
      var checkEmail = $("#email").val().indexOf('@');
      var checkEmailDot = $("#email").val().indexOf('.');

    if(email == ''){
      $("#email").addClass('error');
      error_flag = 1; 
    }

    if(checkEmail<3 || checkEmailDot<9){
     $("#email").addClass('error');
     error_flag = 1;  
   }

      $.ajax({

         url: "<?=base_url('controller/registration_ajax')?>",
         // url: "<?=base_url('controller/register')?>",
        type: "POST",
        datatype: "JSON",
        data: {email: email},
        success: function(res){
          var data = $.parseJSON(res);
          var status = data.status;
          var message = data.message;
          if(status == 'true'){
            // $('#myModal').modal('hide');
            $('#message').html('');
            $('#message').html(message);
            $('#message').css('color',"green");
            $("loading").hide();
          }
          else{
            $('#message').html('');
            $('#message').html(message);
            $('#message').css('color',"red");
          }
        }
      });
     e.preventDefault();
    });
  });


how to use loader with ajax when message is success the load stop when message is or error loader is stop  how to use loader image image in this stiuation. if submition is true loading hide if false loading also hide.

当消息成功时如何使用带有ajax的加载器当消息是或者错误加载器停止时加载停止如何在此stiuation中使用加载器图像图像。如果submition为true，则加载hide，如果false加载也隐藏。

Answer 1

有这样的加载图片：

<img src="loader.gif" id="loader" />

在脚本中，在AJAX调用之前，显示它：

$("#loader").fadeIn(); // You can also use `.show()`
$.ajax({
  // all your AJAX stuff.
  // Inside the success function.
  success: function (res) {
    // all other stuff.
    // hide the image
    $("#loader").fadeOut(); // You can also use `.hide()`
  } // End success
}); // End AJAX

解决您的问题

您的通话中缺少#：

$("loading").hide();
//-^ Add a # here.

将其更改为：

$("#loading").hide();

Answer 2

我这样做：

function loadsth(){
    $('#load_dialog').show();
    $.ajax({
        method: "POST",
        url: "?ajax=ajax_request",
        data: { data:"test"},
        success:function(data) {
            $('#load_dialog').hide();
            }
        });         
    });

Answer 3

您可以使用always处理程序来执行此操作。

另请注意，只有在发送了ajax时才应该loader，所以在你的情况下，只有在验证完成后才应该这样做。

$(document).ready(function() {
  $('#registration_form').on('submit', function(e) {

    /// e.preventDefault();    
    var email = $('#email').val();
    var checkEmail = $("#email").val().indexOf('@');
    var checkEmailDot = $("#email").val().indexOf('.');

    if (email == '') {
      $("#email").addClass('error');
      error_flag = 1;
    }

    if (checkEmail < 3 || checkEmailDot < 9) {
      $("#email").addClass('error');
      error_flag = 1;
    }

    $.ajax({
      url: "<?=base_url('controller/registration_ajax')?>",
      // url: "<?=base_url('controller/register')?>",
      type: "POST",
      datatype: "JSON",
      data: {
        email: email
      },
      beforeSend: function() {
        //show it only if the request is sent
        $("#loading").show();
      },
      success: function(res) {
        var data = $.parseJSON(res);
        var status = data.status;
        var message = data.message;
        if (status == 'true') {
          // $('#myModal').modal('hide');
          $('#message').html('');
          $('#message').html(message);
          $('#message').css('color', "green");
          $("loading").hide();
        } else {
          $('#message').html('');
          $('#message').html(message);
          $('#message').css('color', "red");
        }
      }
    }).always(function() {
      //irrespective of success/error hide it
      $("#loading").hide();
    });
    e.preventDefault();
  });
});

Answer 4

尝试使用jquery＆＃39; ajax函数beforeSend

$.ajax({
    method: "POST",
    url: "/url",
    data: { data:"test"},
    beforeSend: function() {
        //SHOW YOUR LOADER
    },
    success:function(data) {
        //HIDE YOUR LOADER
        }
    });         
});

我希望这能给你一些想法。

Answer 5

尝试这是你的工作

$.ajax({
       url: "<?=base_url('controller/registration_ajax')?>",
       type: 'POST',
          beforeSend: function(){
            $("#loaderDiv").show();
        },
       success: function(data) {
            $('#output-json-inbox').jJsonViewer(data);
            $("#loaderDiv").hide();

       },          
       error: function() {
        alert("error");
       }
    });

使用ajax显示带有submition的加载程序图像

5 个答案: