отображение изображения загрузчика с использованием ajax

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 при успешном завершении сообщения о прекращении загрузки при загрузке сообщения или загрузке ошибки, как использовать изображение изображения загрузчика в этой привязке. если подчинение истинно, загрузите скрыть, если ложная загрузка также скроется.

Answer 1

Вы можете использовать always обработчик, чтобы сделать это.

Также обратите внимание, что вы должны так loader, только если ajax отправлен, поэтому в вашем случае только после того, как сделаны проверки, это должно быть сделано.

$(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 2

Есть загрузочные изображения, как это:

<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 3

Я хотел бы сделать это следующим образом:

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

Answer 4

Попробуйте использовать AJAX функции JQuery в 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"); 
     } 
    });