Добавлять оживление, введя данные в [закрытой] Базе данных

Хорошие, кто-то знает, как добавлять оживление после того, как он послал данные в мою базу данных?

Я нахожу несколько оживления, но не, как использование их, с которым я делаю.

Я хочу, чтобы, нажав на кнопку submit и после того, как данные вошедшие, оно явилось маленьким оживлением показывая мне, что реестр осуществился правильно, и потом исчез и явилась страницей формуляра.

Здесь я нашел какое-то оживление

Кто-то знает, как применять это? Какой-то руководитель или что-то? Он был бы благодарен за любую подсказку.

Где-то здесь я прочитал, что мог бы использовать AJAX, но я не нахожу много на этом, и что я не понимаю встречу очень хорошо.

0
задан 16.06.2016, 13:53
4 ответа

Предполагая файл recibir_datos.php который он берется за то, чтобы вводить в базе данных.

Простой формуляр:

<div id="form-container">
    <div class="loading-animation" style="display:none;">Animación aquí</div>
    <form action="recibir_datos.php" method="post">
         <input type="text" name="title">
         <input type="submit" value="Enviar">
    </form>   
</div>

Формуляр, если, он сделает просьбу post против рукописного шрифта php. Посредством кода javascript не незаконно вторгшийся, мы перехватим событие отправления формуляра, чтобы создавать желанный эффект, используя главным образом книжный магазин jQuery.

javascript:

jQuery(document).ready(function($){
    $('#form-container form').on('submit', function(e){

         e.preventDefault(); // Importante! detenemos el evento de envío

         // Ocultamos el formulario (opcional) y mostramos la animación
         $('#form-container form').hide(); // Opcional
         $('.loading-animation').show(); // Seleccionamos el elemento contenedor de la animación por el nombre de su clase.

         // Realizamos una petición post mediante ajax serializando el formulario.
         $.post(
             $('#form-container form').attr('action'), // Enviamos contra la acción del formulario.
             $('#form-container form').serializeArray(), // Serializamos como array el contenido del formulario.
             function (data, status, xhr){
                 // Aquí se muestra el mensaje de insercción correcta, restablaces el formulario o rediriges al usuario. Se ejecutará siempre que la petición POST devuelva un código de estado 2XX.
             }
         );

    });
});

Ты можешь бросать беглый взгляд в jQuery.post и jQuery.serializeArray (), чтобы понимать лучше, как оно функционирует. Я рекомендую тебе также настоятельно читать о селекторах в jQuery, он жизненный, чтобы знать, что делается в каждом случае.

Есть многие другие способы делать этим и всеми правильных, но идея - главным образом это.

В конце концов, возможно, что код содержит опечатки или синтаксиса, которые могут быть легко решенными, я прошу у тебя прощений за это, не могу тестировать это в этом моменте.

1
ответ дан 24.11.2019, 14:08
  • 1
    и когда ты вновь скрываешь .loadin-animation..., я забываю тебя он мне кажется –  rnrneverdies 16.06.2016, 14:03
  • 2
    @rnd Не, он был умышленным, в комментарии он показывается d и # 243; nde может делаться этот тип операций. Это м и # 225; s cuesti и # 243; n ориентирования, чем давания сделанных вещей. –  Muriano 16.06.2016, 14:42

Потому что ты не пытаешься использовать jquery, санкционируй тебя, когда будет послан формуляр, подтверди ответ, который посылает тебя, и mustras она animaciГіn, так это сделал я в формуляре, который я сделал в Вебе. Ссылка в Веб для того, чтобы ты смог загружаться книжный магазин: https://jqueryvalidation.org показал Тебе пример:

    <form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate(
  submitHandler: function() {
            alert("submitted!");//Aqui haces que se muestre la animación
            });
</script>
1
ответ дан 24.11.2019, 14:08

Без немного больше информации о логике кода мне трудно помогать тебе, но давайте предполагать, что ты реализуешь призыв к BD с функцией в javascript SaveValues(). В этом случае:

function SaveValues() {
    document.getElementById('divAnimacion').style.display = "block";
    LLamadaACódigo(); //Esto es lo que ya tienes
    document.getElementById('divAnimacion').style.display = "none";
}

И к коду html ты добавляешь div, который содержал бы оживление:

<div id="divAnimacion">
    <img src="something.jpg" alt="" />        
</div>

Идеальное состояло бы в том, чтобы делать это с AJAX, что ты permitíra иметь больше контроля на синхронизации данных.

1
ответ дан 24.11.2019, 14:08

Я рекомендую тебе двигаться Аяксу и utilizes события ajaxStart и ajaxComplete. Это натуральная форма, которая приходит с jQuery, чтобы делать то, что ты пробуешь. Если ты используешь формуляры тип submit, ты ничего не сможешь показывать, так как страница перезагружена и теряется страница формуляра. Если у тебя есть сомнения на как reconvetir формуляр, чтобы использовать Аякс, смотрит это соединение.

Эти события призваны из-за jQuery, автоматически начавшись, что упрощает весь код и остается гораздо более чистым.

$(document).ajaxStart(function() {
    $('#reloj').show();
}).ajaxComplete(function() {
    $('#reloj').hide();
});

Согласно примеру у тебя должен бы быть один <div> изначально скрытый, где вводить оживление, которое он появлялся, когда ты сделаешь любой заказ в сервер, и скрывался автоматически, когда он закончит консультацию (будьте успешной или не).

Это CSS, смени это на оживление, которое ты выберешь (уважая Id или меняя рукописный шрифт он достигает из-за соответствующего класса). Не забывай добавить его display: none; для того, чтобы эта скрыла после того, как инициализировался.

#reloj {
   display: none;
   position: fixed;
   background: yellow;
} 

Добавлять это в html

<div id="reloj">Cargando...</div>
1
ответ дан 24.11.2019, 14:08
  • 1
    Si usas formularios no podrás mostrar nada pues la pagina se recarga y se pierde la pagina del formulario. Qui и # 233; n он это говорит? Есть способы делать env и # 237; вы post формуляров с ajax, не теряя ее p и # 225; gina настоящий. –  Muriano 16.06.2016, 13:59
  • 2
    @Muriano, поскольку ты видишь раньше, он говорит " используй Ajax". твой ответ включает " preventDefault ()//останавливать envi и # 243; " что тестирует мою точку... –  rnrneverdies 16.06.2016, 14:00
  • 3
    Твой пример делает то же самое, но по-другому. Перехвати env и # 237; или посредством м и # 233; каждый .submit () и возвратись false, что является, в конце концов, тем же самым, что и использовать e.preventDefault() схвати, и # 237; который скажи мне, и #191; qu и # 233; точка - тот, который остается проверенным? –  Muriano 16.06.2016, 14:46
  • 4
    @Muriano точка, которая остается проверенной, состоит в том, чтобы он довел до сведения, что он был должен меняться в ajax, и я не докажу больше. это одна ни и # 241; ada начинать беседовать из-за ответа. Привет и удача. –  rnrneverdies 16.06.2016, 14:51

Теги

Похожие вопросы