Скрыть данные о загрузке, как только страница загрузилась

Question

В последнее время я задал много вопросов о jquery, я стараюсь изо всех сил узнать об этом.

В любом случае, я отправляю HTTP-запрос ajax на страницу PHP, чтобы сделать форму входа, не требуя обновления страницы. Теперь, так как может потребоваться некоторое время для подключения базы данных и получения информации для входа и т. Д.

Теперь у меня есть Загрузка как .html, но как я могу скрыть данные загрузки после загрузки данных?

Пробовал использовать несколько функций, но, похоже, не работал.

Спасибо, этот сайт мне очень помог, хотя процесс обучения.

Вот Javascript

$(document).ready(function() { 
    // Make a function that returns the data, then call it whenever you 
    // need the current values 
    function getData() { 
     return { 
      user_login: $('#user_login').val(), 
      pass_login: $('#pass_login').val() 

     } 
    } 


     function loading(e) { 
     $('#content').html('Loading Data'); 
    } 

    function check(e) { 
     e.preventDefault(); 
     $.ajax({ 

      url: 'ajax/check.php', 
      type: 'post', 
      data: getData(), // get current values 
      success: function (data) { 
          $('#content').hide('slow'); 

       alert(9); 

      } 

     }); 

    } 

    // Don't repeat so much; use the same function for both handlers 
    $('#field').keyup(function(e) { 
     if (e.keyCode == 13) { 
    var username = $('#user_login').val(); 

     loading(e); 
     check(e); 

     } 
    }); 

    $('#submit').click(function(e) { 
     if (e.keyCode != 13) { 
     loading(e); 
     check(e); 
     } 


    }); 

}); 

Херес HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
       <script src="js/login.js"></script> 
       <div id="content"> Loading...</div> 

       <div id="field"> 
      <input type='text' name='user_login' id='user_login' placeholder='eg: Mark@gmail.com'> <br> 
      <input type='password' name='pass_login' id='pass_login'> <br> 
     <input type="submit" name="submit" id="submit" value="Login"> 
      </div> 

Answer 1

function check(){ 
    $.ajax({ 

     url: 'ajax/check.php', 
     type: 'post', 
     error: function(){ 
      alert('An error has occured.'); 
     }, 
     beforeSend: function(){ 
      $('#content').show('slow').html('Loading'); 
      //loading(e); 
     }, 
     data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values 
     success: function (data) { 
         $('#content').hide('slow'); 

      alert(9); 

     } 

    }); 
} 

$('#submit').click(function(){ 
    check(); 
}); 

$('#field, #field input').keyup(function(e){ 
     var username = $('#user_login').val(); 
     if (e.keyCode == 13) { 
     check(); 
     } 
}); 

Markup

<div id="field"> 
     <input type='text' name='user_login' id='user_login' placeholder='eg:Mark@gmail.com'> <br> 
     <input type='password' name='pass_login' id='pass_login'> <br> 
     <input type="button" name="submit" id="submit" value="Login"> 
    </div> 

удачи !!!

Answer 2

Прежде всего, я не уверен, если ваш код будет возвращать успех. Этот код поможет вам узнать, не отвечает ли ответ. Если вы получите предупреждение обозревателя. Это означает, что у вас есть ошибка на стороне сервера. Его либо путь URL неправильный, либо ваш код состояния ответа сервера равен 500 (Внутренняя ошибка).

$.ajax({ 

     url: 'ajax/check.php', 
     type: 'post', 
     error: function(){ 
      alert('An error has occured.'); 
     }, 
     beforeSend: function(){ 
      $('#content').show('slow').html('Loading'); 
      //loading(e); 
     }, 
     data: getData(), // get current values 
     success: function (data) { 
         $('#content').hide('slow'); 

      alert(9); 

     } 

}); 

Рефакторинг вашего кода будет выглядеть следующим образом. Выберите первый или второй:

$.ajax({ 

     url: 'ajax/check.php', 
     type: 'post', 
     error: function(){ 
      alert('An error has occured.'); 
     }, 
     beforeSend: function(){ 
      $('#content').show('slow').html('Loading'); 
      //loading(e); 
     }, 
     data: {user_login: $('#user_login').val(),pass_login: $('#pass_login').val()}, // get current values 
     success: function (data) { 
         $('#content').hide('slow'); 

      alert(9); 

     } 

});